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

·  阅读 3308

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

日常使用的插件

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
}
复制代码

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

分类:
前端
分类:
前端