VSCode-老項目加入eslint + prettier

0. 安裝插件

• eslint
• perttier -code formatter

 

1. 在項目中安裝eslint

npm install -D eslint

2. 項目中初始化eslint

eslint --init

之後會出現一些詢問：

eslint --init 做了什麼？

• 生成eslint配置文件【與上述選項相關】

module.exports = {
  env: {
    browser: true,
    es6: true
  },
  extends: ['plugin:vue/essential', 'standard'],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  parserOptions: {
    ecmaVersion: 11,
    sourceType: 'module'
  },
  plugins: ['vue'],
  rules: {}
}

• 安裝了以下插件

"eslint-config-standard": "^14.1.1",

  "eslint-plugin-import": "^2.20.2",

  "eslint-plugin-node": "^11.1.0",

  "eslint-plugin-promise": "^4.2.1",

  "eslint-plugin-standard": "^4.0.1",

  "eslint-plugin-vue": "^6.2.2", // 檢測template模板中的問題

安裝完成之後發生了什麼？

我的所有文件都紅了..... 離成功已經不遠了!

3. 配置package.json 自動檢測

// 在scripts中加入以下命令：
"lint": "eslint --ext .js,.vue src"

執行一下就可以看到一堆報錯了===》 錯誤太多，嚇得我中途退出

4. 安裝prettier插件

npm install --save-dev eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli

配置prettierrc.js

// 項目根目錄下新建prettierrc.js 並加入以下配置項
module.exports = {
  "printWidth": 120,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "requirePragma": false,
  "proseWrap": "preserve",
  'singleQuote': true,
  "endOfLine": "auto" 
}

配置eslintrc.js

// eslintrc.js中extends字段中加入plugin:prettier/recommended
  extends: ['plugin:vue/essential', 'standard', 'plugin:prettier/recommended'],

5. 配合lint-fix 自動修正

// 在package.json的scripts中加入以下命令：
"lint-fix": "eslint --ext .js,.vue src --fix"

運行 npm run lint 【17：38開始運行，17：51 這個命令還沒有任何動靜===】

於是我決定人肉fix

6. 開啓編輯器自動修復

vscode版本： 1.45.1【不同的版本配置有些許區別】

// 在編輯器setting.json中加入以下代碼
/* eslint插件配置 */
  "eslint.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true, //eslint保存文件時自動修復
  },
  "eslint.alwaysShowStatus": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "jsx"
  ],
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue"
    ]
  },

按下ctrl + s 世界都清淨了

7. 不能被自動格式化的報錯

保存時按照lint工具格式化已經解決了大部分問題，但是仍然有一部分是要自己手動解決的，比如 == 必須寫成===；比如no-unused-expressions定義了變量卻沒有使用 等等等等

如果你覺得有些規矩不合適你，可能是你的問題，學着適應！但是如果已經感受到生理上的不適了， 那麼就在eslint 配置工具中把它忽略吧😀取其精華去其糟粕~

8. 遺留的問題

單獨的scss文件不能被格式化

解決方式： 安裝stylelint-plus

自動格式化配置如下：

// 在vscode setting.json中配置  
"[scss]": {
    "editor.formatOnSave": true
  },

本文來自

隨手記