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
}
複製代碼

這樣配置，以上插件是不會互相沖突的，使你更優雅的去工做。