eslint vscode 自動修復

0. 創建.eslintrc.js文件 0.1 能夠選擇本身手動創建 在根目錄創建文件.eslintrc.js

const pkg = require('./package.json');

module.exports = {
  env: {
    browser: true,
    amd: true,
    es6: true,
    node: true
  },
  extends: ['airbnb'],
  plugins: ['react', 'react-hooks'],
  parser: 'babel-eslint'
};
複製代碼

0.2 使用ESLint自動建立規則

npm init
eslint --init
eslint --init
How would you like to use ESLint? To check syntax, find problems, and enforce code style
What type of modules does your project use? JavaScript modules (import/export)
Which framework does your project use? None of these
Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)Browser
How would you like to define a style for your project? Use a popular style guide
Which style guide do you want to follow? Standard (https://github.com/standard/standard)
What format do you want your config file to be in? JavaScript
複製代碼

配置以上規則。

1. 安裝npm包

針對vue

npm install --save-dev eslint-friendly-formatter eslint-loader eslint-plugin-html eslint-plugin-vue eslint-plugin-react eslint-config-standard
複製代碼

針對react airbnb

npm install --save-dev eslint-friendly-formatter eslint-loader eslint-plugin-html eslint-plugin-react eslint-config-airbnb  eslint-plugin-react-hooks
複製代碼

2. 打開 vscode 修改配置文件

{
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",  //  用eslint的規則檢測js文件
        {
          "language": "vue",   // 檢測vue文件
          "autoFix": true   //  爲vue文件開啓保存自動修復的功能
        },
        {
          "language": "react", 
          "autoFix": true
        },
        {
          "language": "html",
          "autoFix": true
        },
      ],
    "files.associations": {
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },
    "emmet.includeLanguages": {
        "wxml": "html"
    }
}
複製代碼

重啓VSCode使之生效。