欲善其工必先利其器，本文以vscode编辑器为例子，分享一下笔者常用的vscode工具及技巧，同时也欢迎高手不惜赐教，分享更多的使用技巧，提高工作效率和编程幸福感
常用插件
- Auto Close Tag
html自动闭合标签插件,具体不再详述，看插件介绍 - Auto Rename Tag
html 自动重命名标签插件，谁用谁知道 - Beautify
格式化插件 - Chinese (Simplified) vscode 汉化插件
- Code Runner
在编辑器里运行js代码，同时可在terminal里显示打印结果的工具，方便调试代码,支持多种语言比如 C++, Python, Java等等 - ES7 React/Redux/React-Native/JS snippets
通过指定的前缀，快速生成react代码工具，写一个例子，详看插件介绍
imrcp + tab →
import React, { Component } from 'react'
import PropTypes from 'prop-types'
- ESLint
代码检查工具,不再详述，使用技巧里会分享，eslint 保存格式化 - Git History
git 工具，鼠标定位到代码行上，可以在代码后边显示代码最近修改时间及修改人等信息 - Git Project Manager
git 项目管理工具 - GitLens — Git supercharged
git 工具，作用和 Git History 类似 - HTML Snippets
快速生成html代码工具 - JS JSX Snippets
同上6，通过快捷键，快速生成react代码工具 - LeetCode
力扣刷题神器，没有梯子的注意把账号体系切换到国内账号就可以登录，默认是连的国外账号 - Live Server
快速启动一个本地服务，方便html文件预览调试等 - npm
npm 依赖安装提示，未安装的依赖会在依赖下显示波浪线提示 - npm Intellisense
快速引入依赖插件，详见插件介绍 - Path Autocomplete
路径提示插件 - Path Intellisense
同上，路径补全插件 - Prettier - Code formatter
代码格式化插件 - Vetur
vue 代码高亮插件,写vue必装神器 - Visual Studio IntelliCode
代码智能补全插件，这个不错，大力推荐，用了就知道 - Vue Theme
vue 代码主题插件 - Vue VSCode Snippets
快速生成vue代码插件，在下边的使用技巧里会分享高级使用技巧 - 微信小程序扩展
用vscode 开发小程序插件，代码补全格式化等等 - vscode wxml
提供 wxml 语法支持及代码片段，和上一个类似
总结，以上插件是笔者用过的，基本都是评价4.5和5星的插件，在使用时，有的插件功能重复，建议大家一个功能选一个自己喜欢的，安装太多的插件影响启动速度，同时增加内存占用，可能影响开发效率，最终适得其反。
使用技巧
使用技巧里暂先分享三个小技巧，笔者也是黔驴技穷，各位高手有好的工具方法，欢迎交流分享。
- eslint 保存自动格式化
打开 文件 -> 首选项 -> 设置 -> 点击任意一个 ‘在setting.json中编辑’, 打开配置文件，添加一下代码就OK!
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{
"language": "vue",
"autoFix": true
},
"typescript",
"typescriptreact"
]
- 代码片段的使用
通过代码片段，可以用预定义快捷键，快速生成自定的代码片段，对于开发效率的提高很有裨益。打开 文件 -> 首选项 -> 用户代码片段 弹出菜单有 ‘新建全局代码片段文件’和 ‘新建项目代码片段’，根据自己需要灵活选择 如下是笔者的react代码片段，供参考：
{
"React template": {
"scope": "javascript,jsx",
"prefix": "irea",
"body": [
"import React, {Component} from 'react'",
"",
"class $1 extends Component{",
" render () {",
" return (",
" <>",
" $2",
" </>",
" )",
" }",
"}",
"",
"export default $1"
],
"description": "react template"
}
}
其中的scope 是代码片段用于那些文件，本例的用于js和jsx 文件；prefix 是自定义的快捷键；body是自定义的内容，将会插到文件中，$1 $2 等是光标的位置；description 是代码片段的描述。
- 最后是关于引入文件路径提示的
在开发时，我们可能会通过webpack定义一些路径别名，但是路径补全插件不认识这些路径别名，所以在别名引入时就不能用了，别着急，我们可以通过配置插件的路径别名来达到目的。如下是我的Path Intellisense 插件配置供参考，还是打开vscode配置 "setting.json" 文件,添加如下配置：
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src",
"components": "${workspaceRoot}/src/components",
"assets": "${workspaceRoot}/src/assets",
"util": "${workspaceRoot}/src/util",
"plugin": "${workspaceRoot}/src/plugin"
},
需要注意的是这里配置的别名路径要和项目里配置的一一对应，可以把配置文件修改放在项目配置里而不是全局配置。以上，有误或者不妥的地方，欢迎留言指出，谢谢！
