那些让你编码效率飞起的 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… 之类是用来标记代码片段插入后，光标的切换位置。
怎么样，这些黑科技不是很有效呢？马上用起来吧！
参考文章： vscode 插件推荐 - 献给所有前端工程师 能让你开发效率翻倍的 VSCode 插件配置（上） 能让你开发效率翻倍的 VSCode 插件配置（中）
[你的支持，是对博主最大的鼓励。猛戳这里，右上角给点个 Star 吧！>>>
](https://github.com/mobilesite/mobilesite.github.io/)
Like Issue PageError: Comments Not Initialized
Write Preview
Login with GitHub Styling with Markdown is supported Comment Powered by Gitment
CATALOG
- 一、代码补全
- 二、代码格式化和质量保证
- 三、代码预览与测试
- 四、版本控制
- 五、其它插件
- 切换项目
- 代码跟踪
- 代码片段比对
- 代码转换
- 同步 VSCode 的设置信息
- 六、命令行
- 七、快捷键
- 1、关于 窗口 的操作
- 2、关于 分栏 的操作
- 3、关于 文件 的操作
- 4、关于 行 的操作
- 5、关于 词 的操作
- 6、关于 光标 的操作
- 7、关于 主命令框 的操作
- 八、用户代码片段
FEATURED TAGS
HTTP 计算机专业英语 学习笔记 摄影 讲座笔记 读书笔记 JavaScript 类型检测 Photoshop 闭包 CSS 倒计时 布局 移动适配 AngularJS node.js jade JavaScript 基础 HTML [Sublime Text](/tags/#Sublime Text "Sublime Text") LESS 前端易混淆知识点 jQuery 的 attr() 和 prop() bug 日常拾遗 兼容性 MarkDown 水平垂直居中实现方案 工作流 HTML5 下载文件 Vue.js canvas 职业生涯 前端工具 面向对象 git Gulp 浏览器 DNS 缓存 IP 寻址 React.js 前端优化 webpack [React Native](/tags/#React Native "React Native") juicer 模板 页面截断 CSS3 3D 关于自己的思考 ESLint flow 静态类型检查 听演讲 工时评估 感悟 博客建设 前端调试 CSS 字符转义 JavaScript 异步编程 [CSS Grid Layout](/tags/#CSS Grid Layout "CSS Grid Layout") Vuex hash phantom.js 测试 Mac 学习软件 自动化工作流 管理 Nginx 配置 服务端开发 https [npm link](/tags/#npm link "npm link") 模块化 MySQL [Navicat for MySQL](/tags/#Navicat for MySQL "Navicat for MySQL") nginx php mySQL koa2 MongoDB mongoose 端口占用 微信页面退出回流 人生感悟 人生 ES6 健康 历史 Tex 数学公式 Python 深度学习 微信公众号开发 Node.js 虚拟机 heroku 《西潮》 Typescript weex vw 区块链 人生体悟 国际化方案 微信小程序 钉钉微应用 VSCode 职场 团建 数据结构 java 算法复杂度分析 动态数组 electron 桌面应用程序开发 创意 项目管理 人工智能 随笔 笔记
WATCHLIST
原文地址: https://mobilesite.github.io/2018/06/02/the-best-vscode-extensions/
网友评论