那些让你编码效率飞起的 VSCode 工具和技巧

2019-10-14 本文已影响0人袁俊亮技术博客

那些让你编码效率飞起的 VSCode 工具和技巧

老板总是干活又快又好的员工。对程序员来说，编码速度的快慢，代码质量的好坏，不仅对项目意义重大，而且也直接影响程序员的自身业绩和生活质量。本文将总结一系列 VSCode 编码增效工具和技巧，让你编码效率飞起来！

一、代码补全

Auto Close Tag

适用于 JSX、Vue、HTML，能自动补全要闭合的标签

Auto Rename Tag

适用于 JSX、Vue、HTML，在修改标签名时，能在你修改开始（结束）标签的时候修改对应的结束（开始）标签，帮你减少 50% 的击键

Document This

自动生成 JSDoc 注释，快捷键 ctrl+alt+d ctrl+alt+d。或者在 function 上输入/**然后 tab 键也可以生成注释。

Npm Intellisense

NPM 依赖补全，在你引入任何 node_modules 里面的依赖包时提供智能提示和自动完成，会提示已安装的模块名

Path Intellisense

文件路径补全，在你用任何方式引入文件系统中的路径时提供智能提示和自动完成

VueHelper

Vue2 代码段 (包括 Vue2 api、vue-router2、vuex2)

HTML Snippets：HTML5

各种 HTML 标签片段，可简写

IntelliSense for CSS class names

CSS 类名补全，会自动扫描整个项目里面的 CSS 类名并在你输入类名时做智能提示

Javascript (ES6) Code Snippets

常用的类声明、ES 模块声明、CMD 模块导入等的简写，支持的简写不下 20 种；

Bracket Pair Colorizer

识别代码中的各种括号，并且标记上不同的颜色，方便你扫视到匹配的括号，在括号使用非常多的情况下能环节眼部压力，编辑器快捷键固然好用，但是在临近嵌套多的情况下却有些力不从心

Color Info

这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。

jQuery Code Snippets

jQuery 代码提示

React.js Code Snippets

React 代码提示

React Redux ES6 Snippets

Redux 代码提示

此外，值得一提的是：

VSCode 内置的智能建议已经非常强大，不过我对默认的配置做了如下修改，以达到类似于在 Vim 中那样在任何地方都启用智能提示（尤其是注释和字符串里面）：

{
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
}

值得注意的是，VSCode 中内置了 Emmet 插件，所以可以用 Emmet 语法简写来快速编码。比如：

ul>li.item*3

让它生成目标代码的方法是按 tab 键。

二、代码格式化和质量保证

EditorConfig for VS Code

结合. editorconfig 配置文件来起作用

.editorconfig 配置文件：

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = false # 这一项不能设置为true，因为它会导致vue文件的style和script块中的代码在格式化后末尾出现一个空行。
trim_trailing_whitespace = true

# editorconfig-tools is unable to ignore longs strings or urls
max_line_length = null

ESLint

Javascript 语法检测，高亮提示

Code Spell Checker

单词拼写检查

HTMLHint

HTML 语法错误检查

markdownlint

Markdown 格式提示

vetur

Vue 开发生态必备插件（官方推荐），处理的是. vue 文件，支持 Syntax Highlighting， Emmet 2.0，Snippet，Foramtting，IntelliSense，Linting 等

Prettier

代码格式化

Beautify

代码格式化

vscode-icons

给不同类型的文件加上图标，方便文件查找

Import Cost

自动计算 Import 包大小，便于控制代码体积

filesize

在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间、gzip 压缩后的大小等。

Markdown All In One

Markdown 格式化

TSLint

TypeScript 目前不是我的主要编程语言，但也早早的准备好了；

MarkdownLint

Markdown 如果不合法，可能在某些场合导致解析器异常，因为 Markdown 有好几套标准，在不同标准间部分语法支持可能是不兼容的

TODO Highlight

这个插件能够在你的代码中标记出所有的 TODO 注释，以便更容易追踪任何未完成的业务。在默认的情况下，它会查找 TODO 和 FIXME 关键字。当然，你也可以添加自定义表达式。

Regex Previewer

这是一个用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上，并高亮所有的匹配项。

三、代码预览与测试

Code Runner

运行选中代码段 (支持大量语言，包括 Node)

Open in Browser

在浏览器中打开

SVG Viewer

SVG 查看器

Markdown PDF

Markdown 转 PDF

四、版本控制

Git Blame

在状态栏显示当前行的 Git 信息

Git History(git log)

查看 git log

GitLens

显示文件最近的 commit 和作者，显示当前行 commit 信息

五、其它插件

切换项目

Project Manager

项目管理，让我们方便的在命令面板中切换项目文件夹，当然，你也可以直接打开包含多个项目的父级文件夹，但这样可能会让 VSCode 变慢

代码跟踪

vue peek

用于跟踪 vue.js 代码的工具

代码片段比对

Partial Diff

对比两段代码或文件

代码转换

ECMAScript Quoets Transformer

ECMAScript Quotes Transformer 方便在字符串和变量混搭模式（String Concat）的代码和字符串模板（Template Literals）模式间来回转换，省去手动的移动光标、修改引号等操作。

同步 VSCode 的设置信息

Settings Sync

VSCode 设置同步到 Gist

讲了这么多插件，那这些插件怎么配置呢？下面附上我的 VSCode 配置文件供大家参考：

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.fontSize": 18,
  "editor.wordWrap": "on",
  "editor.detectIndentation": false,
  "editor.cursorBlinking": "smooth",
  "editor.formatOnPaste": true,
  // 是否允许自定义的snippet片段提示,比如自定义的vue片段开启后就可以智能提示
  "editor.snippetSuggestions": "top",
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 500,
  "files.trimTrailingWhitespace": true,
  // 配置文件关联，以便启用对应的智能提示，比如wxss使用css
  "files.associations": {
    "*.vue": "vue",
    "*.wxss": "css"
  },
  // 配置emmet是否启用tab展开缩写
  "emmet.triggerExpansionOnTab": true,
  // 配置emmet对文件类型的支持，比如vue后缀文件按照html文件来进行emmet扩写
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html",
    "javascript": "javascriptreact",
    // xml类型文件默认都是单引号，开启对非单引号的emmet识别
    "xml": {
      "attr_quotes": "single"
    }
  },
  // 在react的jsx中添加对emmet的支持
  "emmet.includeLanguages": {
    "jsx-sublime-babel-tags": "javascriptreact"
  },
  // 是否开启eslint检测
  "eslint.enable": false,
  // 文件保存时，是否自动根据eslint进行格式化
  "eslint.autoFixOnSave": false,
  // eslint配置文件
  "eslint.options": {
    "plugins": [
      "html",
      "javascript",
      {
        "language": "vue",
        "autoFix": true
      },
      "vue"
    ]
  },
  // eslint能够识别的文件后缀类型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    "typescript",
    "typescriptreact"
  ],
  // 格式化快捷键 shirt+alt+F
  // prettier进行格式化时是否安装eslint配置去执行，建议false
  "prettier.eslintIntegration": true,
  // 如果为true，将使用单引号而不是双引号
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2,
  // vetur插件格式化使用beautify内置规则
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // 下面这一段不能少，否则回导致VSCode格式化代码时无法正确格式化vue的style和script块（缩进为4个空格）。
  "beautify.language": {
    "js": {
      "type": [
        "javascript",
        "json"
      ],
      "filename": [
        ".jshintrc",
        ".jsbeautify"
      ]
    },
    "css": [
      "css",
      "scss",
      "less"
    ],
    "html": [
      "htm",
      "html",
      "vue"
    ]
  },
  "gitlens.keymap": "chorded",
  "gitlens.historyExplorer.enabled": true,
  "gitlens.advanced.messages": {
    "suppressShowKeyBindingsNotice": true
  },
  "sync.gist": "mobilesite"
}

六、命令行

code .  # 用VSCode打开当前目录
code xxx # 用VSCode打开某个目录

七、快捷键

1、关于窗口的操作

新开窗口：ctl + shift + n
关闭窗口：ctrl + shift + w
放大 / 缩小字号：ctrl + +/-
显示和隐藏侧边栏：Ctrl + B

2、关于分栏的操作

新建一个分栏（编辑器）：ctrl + \ （最多允许三个分栏）
选中某个分栏：ctrl + 1/2/3 数字表示要选中的是第几个分栏

3、关于文件的操作

新建文件: ctrl + n
关闭当前文件：ctrl + F4
打开文件： ctrl + o
打开的文件之间切换：ctrl + tab

4、关于行的操作

新开一行：光标在行尾的话，回车即可；光标不在行尾，ctrl + enter 向下重开一行；ctrl + shift + enter 则是在上一行重开一行
删除一行：光标没有选择内容时，ctrl + x 剪切一行；ctrl + shift + k 直接删除一行
移动一行：alt + ↑ 向上移动一行；alt + ↓ 向下移动一行
复制出一行：alt + shift + ↓ 向下复制一行；alt + shift + ↑ 向上复制一行
复制或剪切当前行 / 当前选中内容到剪切板：Ctrl+C
粘贴：ctrl + v
代码行缩进：减少缩进 Ctrl + [、增加缩进 Ctrl +]

5、关于词的操作

选中一个词：ctrl + d
搜索 / 替换：

ctrl + f ：搜索 ctrl + alt + f：替换 ctrl + shift + f：在项目内搜索

格式化整个文件的代码：shift + alt + f

6、关于光标的操作

移动到行首： Home
移动到行尾： End
移动到文件开头： Ctrl + Home
移动到文件结尾： Ctrl + End
选择从行首到光标处： Shift + Home
选择从光标到行尾： Shift + End
删除光标右侧的所有字： Ctrl + Delete
多行编辑（列编辑）：Alt + Shift + 鼠标左键
同时选中所有匹配： Ctrl + Shift + L
下一个匹配的也被选中：Ctrl + D
回退上一个光标操作： Ctrl + U

7、关于主命令框的操作

打开命令面板：ctrl + shift + p

在打开的输入框内，可以输入任何命令。按一下 Backspace 会进入到 Ctrl + P 模式。

在 Ctrl + P 模式下输入 > 可以进入 Ctrl + Shift + P 模式

在 Ctrl + P 窗口下还可以:

直接输入文件名，跳转到文件：

? 列出当前可执行的动作

! 显示 Errors 或 Warnings，也可以 Ctrl + Shift + M

: 跳转到行数，也可以 Ctrl+G 直接进入

@ 跳转到 symbol（搜索变量或者函数），也可以 Ctrl + Shift + O 直接进入

@ 根据分类跳转 symbol，查找属性或函数，也可以 Ctrl + Shift + O 后输入:进入

# 根据名字查找 symbol，也可以 Ctrl + T

八、用户代码片段

所谓用户代码片段，你可以理解为是一小段可以被复用的模板程序。怎么复用这个模板程序呢，就是在需要插入这段程序的地方输入一个代号，然后按回车，就完成了这段程序的插入。目的是减少重复的输入。下面我们就来新建一个用户代码片段：

点击编辑器左下脚的齿轮图标 ==》选择 “用户代码片段”==》“新建用户全局代码片段文件”==》随便起个名字（如 vuetemp），然后在文件写入如下内容：

{
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<template>",
        "<div :class=\"`px-page ${$hasNavbarClass} px-page--$1`\">",
          "$5",
        "</div>",
      "</template>",
      "<script>",
        "$3",
        "import {",
          "mapState,",
          "mapGetters,",
          "mapActions,",
          "mapMutations",
        "} from 'vuex';",
        "export default {",
          "name: '$2',",
          "components: {",
            "$4",
          "},",
        "}",
      "</script>",
      "<style lang=\"less\">",
        "@import \"../../styles/pxui/index.less\";",
        "$6",
      "</style>"
    ],
    "description": "a new vue file template"
  }
}

然后在新建一个文件之后，就可以直接键入vue(与上面 prefix 中指定的字符相同即可)，再回车就可以自动插入上述 body 中定义的代码片段了。其中的 1、1、1、2… 之类是用来标记代码片段插入后，光标的切换位置。

怎么样，这些黑科技不是很有效呢？马上用起来吧！

[你的支持，是对博主最大的鼓励。猛戳这里，右上角给点个 Star 吧！>>>

](https://github.com/mobilesite/mobilesite.github.io/)

Like Issue PageError: Comments Not Initialized

Write Preview

那些让你编码效率飞起的 VSCode 工具和技巧

那些让你编码效率飞起的 VSCode 工具和技巧

一、代码补全

二、代码格式化和质量保证

三、代码预览与测试

四、版本控制

五、其它插件

切换项目

代码跟踪

代码片段比对

代码转换

同步 VSCode 的设置信息

六、命令行

七、快捷键

1、关于窗口的操作

2、关于分栏的操作

3、关于文件的操作

4、关于行的操作

5、关于词的操作

6、关于光标的操作

7、关于主命令框的操作

八、用户代码片段

CATALOG

FEATURED TAGS

WATCHLIST

猜你喜欢

热点阅读

那些让你编码效率飞起的 VSCode 工具和技巧

那些让你编码效率飞起的 VSCode 工具和技巧

一、代码补全

二、代码格式化和质量保证

三、代码预览与测试

四、版本控制

五、其它插件

切换项目

代码跟踪

代码片段比对

代码转换

同步 VSCode 的设置信息

六、命令行

七、快捷键

1、关于 窗口 的操作

2、关于 分栏 的操作

3、关于 文件 的操作

4、关于 行 的操作

5、关于 词 的操作

6、关于 光标 的操作

7、关于 主命令框 的操作

八、用户代码片段

CATALOG

FEATURED TAGS

WATCHLIST

猜你喜欢

热点阅读

1、关于窗口的操作

2、关于分栏的操作

3、关于文件的操作

4、关于行的操作

5、关于词的操作

6、关于光标的操作

7、关于主命令框的操作