最近朋友们都开始使用 vscode 了，对于 vscode 的流行，丰富的扩展可谓是劳苦功高，但是市场太大，也会带来一些选择的问题。在这里总结一下用到的还不错的插件，同时结合具体的使用场景做些总结，比如 vue 开发或是 react 开发又需要怎样配置呢？
frontend
最近发现一个针对前端常用插件的汇总的扩展，可惜不知道是何原因安装不上，但它提供的扩展清单还是有用的，直接列举一下。
- ESLint - Integrates ESLint JavaScript into VS Code.
- Prettier - Code formatter - VS Code plugin for prettier/prettier
- Vetur - Vue tooling for VS Code
- JavaScript (ES6) code snippets - Code snippets for JavaScript in ES6 syntax
- Path Intellisense - Visual Studio Code plugin that autocompletes filenames
- Auto Close Tag - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
- npm - npm support for VS Code
- npm Intellisense - Visual Studio Code plugin that autocompletes npm modules in import statements
- Auto Rename Tag - Auto rename paired HTML/XML tag
- Formatting Toggle - A VS Code extension that allows you to toggle the formatter (Prettier, Beautify, …) ON and OFF with a simple click.
- Vue Peek - Allows peek and goto definition for Vue single-file components.
- Reactjs code snippets - Code snippets for Reactjs development in ES6 syntax
- Search node_modules - Quickly search the node_modules folder.
- TSLint - TSLint support for Visual Studio Code
- Angular 8 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout - 240 Angular Snippets (TypeScript, Html, Angular Material, Flex Layout, ngRx, RxJS, PWA & Testing) Updated for v8 Beta
- EditorConfig for VS Code - EditorConfig Support for Visual Studio Code
- Debugger for Chrome - Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.
- IntelliSense for CSS class names in HTML - CSS class name completion for the HTML class attribute based on the definitions found in your workspace.
- GitLens — Git supercharged - Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more
- Angular Language Service - Editor services for Angular templates
- angular2-switcher - Easily navigate to component's files in angular2 project.
- SimonTest - Analyzes your Angular code and generates tests.
- ES7 React/Redux/GraphQL/React-Native snippets - Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax
- change-case - Quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current selection or current word
- Less IntelliSense - Advanced autocompletion and refactoring support for Less
- SCSS IntelliSense - Advanced autocompletion and refactoring support for SCSS
- Visual Studio IntelliCode - Preview - AI-assisted development
- Node Debug - Node.js debugging support
- Document This - Automatically generates detailed JSDoc comments in TypeScript and JavaScript files
- TODO Highlight - highlight TODOs, FIXMEs, and any keywords, annotations...
- Bracket Pair Colorizer - A customizable extension for colorizing matching brackets
插件篇
那就按照用途小小的分类一下吧
- 主题篇
- Dracula Official：黑色主题
- One Dark Pro
- Material Theme & Material Icon Theme
- HTML
- Auto Close Tag：自动补全标签
- Auto Rename Tag：修改一个标签，自动更新对应标签
- Highlight Matching Tag：高亮匹配的标签
- CSS
- CSS-Peek：通过点击css名称跳转到定义，不支持 vue 组件开发
- JS
- Bracket Pair Colorizer：高亮区分代码块，花里胡哨的，看自己需要吧
- Browser
- open in browser：通过本地文件的方式在浏览器打开
- Live Server：通过启动本地服务的方式在浏览器打开
- 格式化
- Prettier：代码格式化，编辑器默认的格式化处理就会被prettier代替，目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件，它就能够自动应用 Prettier，并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。
- Beautify：格式化代码
- 工具
- GitLens：增强GIT功能
- Auto Import：自动引入，TS下才有用
- TODO Highlight：TODO高亮
- Import Cost：导包成本提示
- REST Client：在 vscode 中测试 API
- npm Intellisense：自动补全npm模块名称
- Code Runner：直接右键选中执行
- Trailing Spaces：高亮那些冗余的空格，可以快速删掉
- Code Spell Checker：拼写检查
- Path Intellisense：自动完成引用路径
- Quokka.js：自动执行代码并有报错提示，缺点：不够智能，改变用户习惯，比如新建文件
- EditConfig：在项目中配合.editConfig来保证代码风格
- Turbo Console Log：快速添加 console 调试，快速注释与删除
- Vue
- Vetur：Vue开发必备
- vue-peek：vue组件跳转
- VueHelper：snippet代码片段
- React
- React Native Tools：代码提示、Debugging、集成RN的命令
- React.js code snippets：react开发提示
- react-beautify：格式化 javascript, JSX, typescript, TSX 文件
- React-Native/React/Redux snippets for es6/es7
下面在介绍一些使用的，可能需要加些配置的插件
- Document This：快速添加注释块，快捷键： 按两次Ctrl+alt+d
"docthis.includeAuthorTag": true,//出现@Author "docthis.includeDescriptionTag": true,//出现@Description "docthis.authorName": "Ethan",//作者名字
vue篇
在 vue 中，template 格式化还没有很好的支持 prettier，应该说目前官方只推荐使用 js-beautify-html，因此我们 使用 beautify 执行 template 格式化。具体配置如下
// vetur configuration
"vetur.format.defaultFormatter.html": "js-beautify-html",
// prettier configuration
"prettier.disableLanguages": [
"vue"
],
// beautify configuration
"beautify.language": {
"js": {
"type": [
"javascript",
"json"
],
"filename": [
".jshintrc",
".jsbeautify"
]
},
"css": [
"css",
"scss"
],
"html": [
"htm",
"html",
"vue" //在这里加上vue
]
}
@20191106 更新：vue 项目开发目前可以并不需要如上设置了
- prettier 默认禁用 vue，当然也可以选择开启
- vetur 自带的格式化特挺好用的，这当然看个人了
vscode 安装 prettier 格式化之后默认强制双引号和自动添加分号，我个人对此没有强迫症，随心所欲一点，所以加上如下配置
"prettier.singleQuote": true,
"prettier.semi": false,