VSCode+ESLint+Prettier使你的开发更优雅

VSCode 是目前最受前端工程师喜好的编辑器,轻量且有强大的插件，咱们常常用的一些插件好比 ESLint，Prettier 等由于一些历史缘由咱们作了不少兼容的配置，如今随着版本的更新，以前作到配置已经影响到了咱们正常的工做，好比咱们的保存 vue 文件自动格式化时，常常会出现格式错乱须要保存两次，单引号双引号重复修改等问题,这些缘由是 ESLint,TSLint,Prettier,Vetur 冲突了，今天贴出个人 VSCode 的 settings.json，供不会配置的同窗参考。先推荐些我平常使用的插件。

平常使用的插件

• ESLint JS 格式化插件

• TSLint TS 格式化插件

• Prettier - Code formatter 代码格式化插件能够配合ESLint、TSLint一块儿使用。

• Vetur VUE 强大的开发工具

• Angular Language Service Angular 开发神器

• Angular 8 Snippets Angular 智能提示，我的感受比 vscode 官方推荐的好用

• Debugger for Chrome 好用的 debug 工具

• Paste JSON as Code json 一键转接口，谁用谁知道

• GitLens 加强 VSCode 内置的 Git 功能,超好用

• Chinese (Simplified) Language Pack 应该没有人不知道 VSCode 是有官方汉化包吧

settings.json 配置

主要解决 ESLint,TSLint,Prettier,Vetur 保存时自动格式化而形成格式冲突的问题。

{
  "workbench.colorTheme": "Monokai",
  "window.zoomLevel": 0,
  "editor.fontSize": 14,
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.tslint": true
  },
  "prettier.singleQuote": true,
  "prettier.eslintIntegration": true,
  "prettier.tslintIntegration": true,
  "vetur.format.defaultFormatter.js": "none",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "git.enableSmartCommit": true
}
复制代码

这样配置，以上插件是不会互相冲突的，使你更优雅的去工做。