vscode 插件推荐 - 前端开发

必备

2022，VSCode 前端插件推荐（摸鱼必备）

#HTML Snippets

HTML标签智能提示

#HTML CSS Support

HTML标签内样式的智能提示

#JavaScript(ES6) code snippets

ES6语法智能提示以及快速输入

#Path Intellisense

输入路径时自动补全

#Vetur

Vue 的语法高亮、错误检查、格式化等工具集合

#eslint

代码格式化，发现语法错误和低效的编程实践扫描和提示，还可以保存时自动格式化，需要团队定制统一的规范

#Prettier

配合Vetur + ESLint完美解决格式化问题

---

#推荐

#Chinese (Simplified) Language Pack for Visual Studio Code

中文汉化，都懂的。。

#Markdown All in One

支持markdown语法文件

#GitLens

git 日志，可直接显示每行代码的最近修改记录

#vscode-icons

给资源树目录加上漂亮的图标，方便区分文件类型

#Color Highlight

css样式直观显示，方便调样式

#Bracket Pair Colorizer

复杂嵌套的代码块中显示成对的不同颜色的括号，可以帮助定位

#Auto Close Tag

自动闭合HTML/XML标签

#Auto Rename Tag

自动重命名关闭标签

#SVG Viewer

SVG图片预览

#Git History

查看git log或一个文件的git历史，比较不同的分支，在多人协作或经常优化时很有用

#debugger for chrome

直接在vscode打断点调试，类似chrome调试，方便之处在于好定位到问题代码

Vs code 配置

• 插件安装 ( 必须 ): EditorConfig for VS Code, ESLint, Prettier, Git Lens, Vue 2 Snippets

• 插件安装 ( 可选 ): npm Intellisense, Path Intellisense, Auto Rename Tag, vscode-icons, JavaScript standardjs styled snippets

• 全局配置 快捷键( ctrl + , ):

• "editor.tabSize": 2,
  "eslint.validate": ["javascript","javascriptreact",{"language": "vue","autoFix": true}
  ],
  "eslint.autoFixOnSave": true,
  "eslint.run": "onSave",
  "javascript.format.enable": false,
  "prettier.printWidth": 100,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5",
  "prettier.eslintIntegration": true,
  "vueStyle.formatOnSave": true,
  "editor.formatOnSave": true,
  "files.autoSave": "onWindowChange",
  "emmet.syntaxProfiles": {"vue-html": "html","vue": "html"
  }

  {"editor.tabSize": 2,"eslint.validate": ["javascript","javascriptreact",{"language": "vue","autoFix": true}],"eslint.autoFixOnSave": true,"eslint.run": "onSave","javascript.format.enable": false,"prettier.printWidth": 100,"prettier.singleQuote": true,"prettier.trailingComma": "es5","prettier.eslintIntegration": true,"vueStyle.formatOnSave": true,"editor.formatOnSave": true,"files.autoSave": "onWindowChange","emmet.syntaxProfiles": {"vue-html": "html","vue": "html"},"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"editor.codeActionsOnSave": {"source.fixAll.eslint": true}
  }