vscode 常用插件

1. Search node_modules

用于搜索node_modules下的文件

2. CodeMetrics

Computes complexity in TypeScript / JavaScript files.
It looks like this



3. Code Runner

右键 run code 直接在vscode里运行当前文件的代码。支持多种语言。
Run code snippet or code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, C# Script, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, and custom command

4. Relative Path Refactor

重构文件相关的引用路径,当你把文件删除了或者文件路径移动了,其他引用该文件的路径会自动重构。
重构时,修复相对路径错误。 自动查找和修复文件夹中所有文件的所有相对路径。 修复后,查看更改!

5. Paste and Indent

格式化粘贴

This extension adds limited support for pasting and indenting code. Much like SublimeText's paste_and_indent.

6. Evermonkey

主要特征:
☞ 它是 EditorConfig 面向 Visual Studio 官方发布的扩展
☞ 可以用来定义缩进,制表符以及行开始和结束位置的样式
☞ 拥有可以用来读取和遵循已经定义好了的样式规则的文本编辑器插件
☞ 使用了 editorconfig npm 软件包

  ![](http://upload-images.jianshu.io/upload_images/910389-a4303b34166611c6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Evernote 是最受欢迎的笔记应用程序之一。它可以用于通过 Evermonkey 扩展来提高编码的质量和效率。这个方便的 Visual Studio Code 扩展能让 Evernote 支持 Markdown,与 Sublime Text 遵循相同的原则,但拥有更快速的体验。

7. IntelliSense for CSS class names

它跟 CSS 一样令人折服, 很难去记忆所有的CSS类。这个扩展可以根据工作区中的 CSS 文件自动补全你输入的 CSS 类名。

8. Bracket Pair Colorizer

Bracket Pair Colorizer 是一个括弧着色器,如果不同的括弧会让你感到一团乱麻,这个 Visual Studio Code 扩展就能帮助你使用代码着色选项来匹配它们。你可以定义那些字符匹配指定的颜色。

9. TextTransform

设置字母大小写转换

    {
        "key": "ctrl+k ctrl+u",
        "command": "uppercase",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+k ctrl+l",
        "command": "lowercase",
        "when": "editorTextFocus"
    }

VSCode快捷键大全

10. Power Mode

activate-power-mode 在其它编辑器里很流行,有很酷的代码编写效果,那么vscode的你也可以尝试这种极致体验:
[图片上传失败...(image-f8b3e5-1531365416804)]

11. Prettier - JavaScript formatter

VS Code package to format your Javascript / Typescript / CSS
我找他是用来格式化tsx文件的,vscode自带的格式化可以满足其他文件格式化的需要,看个对比图,
自带的格式化tsx:


Prettier - JavaScript formatter格式化后的,

VS Code 折腾记 - (9) 新一轮前端插件(代码质量|正则|版本控制|NG|Vue|React)
Visual Studio Code 必备插件,主题及语法提示

12. Copy Relative Path

在进行git操作的时候往往需要文件相对根目录的路径
vscode有自带的copy path 但是copy出来的是D:\demo\rebaseDemo\jin.txt
然后报错

copy path

我们就需要手动去改为D:/demo/rebaseDemo/jin.txt,这样很麻烦,有了Copy Relative Path就方便多了,直接拿到根目录的相对路径src/meta.html
但是在当前workspace有多个项目,Copy Relative Path就会带上项目的路径

13. styled-jsx

css in js 的插件,官方说明需要两个插件配合使用

Syntax Highlighting Visual Studio Code Extension

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install vscode-styled-jsx

Autocomplete Visual Studio Code Extension

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install vscode-styled-jsx-languageserver

next.js 推荐使用的css写法就是styled-jsx,但是这个插件有个bug:Request textDocument/completion failed with message: Cannot read property 'kind' of undefined #2

          <style jsx>
            {`
              .app-container {
                background-color: #fff;
                max-width: 640px;
                margin: auto;
                padding: 20px;
              }
            `}
          </style>

括号写在style 标签下面,没有语法提示,下面这么写就是好的:

<style jsx>{`
   .app-container {
       background-color: #fff;
       max-width: 640px;
       margin: auto;
       padding: 20px;
    }
`}</style>
14. Paste Image

Paste image directly from clipboard to markdown/asciidoc(or other file)!
Support Mac/Windows/Linux! And support config destination folder.

用qq截图或者复制页面上的图片,然后Ctrl+Alt+V就可以轻松的复制图片到markdown,这里我们可以配置图片的目录,"pasteImage.path": "${projectRoot}/screenshot",这样所有的markdown的图片都会被保存到项目根目录的screenshot目录下

截图

然后push到远端git仓库也是可以完美呈现的

15. View Node Package

在当前文件右键选择View Node Package Source,然后头部就会显示你当前文件依赖的第三方库,


View Node Package

然后选中一个文件名,就会在浏览器中打开该库的仓库,就很容易看源码,而不用在浏览器里去搜索

16. Remove Comments

一键删除当前文件的注释,支持40多种语言

17. htmltagwrap

给代码外面添加HTML标签


wraphtmltag.gif

vscode自带的emmet有wrap功能,但是需要在vscode里面设置快捷键,默认没有快捷键


emmet wrapWithAbbreviation
18. Vue CSS Peek

为单页面的 vue 文件提供 css 转定义的支持,找到标签上的classname 然后F12直接定位到该classname所在的位置

19. Aliyun Serverless VSCode Extension 阿里云 Serverless 产品 函数计算 Function Compute
20. Git Graph extension for Visual Studio Code
git-graph.gif

21. Todo Tree

通过tree的形式展示项目中所有TODO项


Todo Tree

22. 实时可视化Debug

Debug Visualizer

23. Draw.io Integration 流程图工具

目前http://draw.io支持3中文件后缀,你只需要新建3种后缀之一的文件就可以在vs code中画流程图,它们分别是,

  • .drawio
  • .dio
  • .drawio.svg

后续还会支持*.drawio.png,可以直接保存为常规图片格式,目前尚未发布。

draw.io
24. Partial Diff 对比代码不同的地方

在写单测的时候我们我们我们有期待的结果expected,还有原始值,原始值经过一个函数的处理得到expected,但是别人入手你的代码的时候,这个函数完全是个黑盒,在不看这个函数实现的时候,怎么推测这个函数到底做了什么,这个时候Partial Diff就很重要了,直接选取两个代码片段做对比,很直观的就发现,两段数据发生了什么变化,从而推测函数做了什么。

25. htmltagwrap 给选中的html片段外层包裹新的标签
26. change-case 将你选中的文本变换为各种大小写格式
27. Less IntelliSense 对写在单独文件的less变量跟mixin有很好的提示效果,也可以F12直接定位进定义文件
28. Excalidraw 简洁 明了 易上手的流程图工具 而且开源,还有素材库好像素材都可以免费使用,太好了吧,也有网页版https://excalidraw.com/
29. i18n Ally

vscode settings.json

  "i18n-ally.localesPaths": ["web/src/locales"],
  "i18n-ally.enabledParsers": ["js", "ts"],
  "i18n-ally.enabledFrameworks": [
    "react-i18next"
  ],
  "i18n-ally.ignoreFiles": [
    "config.ts"
  ],
  "i18n-ally.defaultNamespace": "translation",
i18n Ally
30. SandDance for VSCode Right-click on a .csv or .tsv file and choose View in SandDance.
右键预览文件
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 210,978评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 89,954评论 2 384
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,623评论 0 345
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,324评论 1 282
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,390评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,741评论 1 289
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,892评论 3 405
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,655评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,104评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,451评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,569评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,254评论 4 328
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,834评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,725评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,950评论 1 264
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,260评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,446评论 2 348

推荐阅读更多精彩内容