Eslint plug-in

useprittierThe plug-in

Link: Eslint – plugin – prettier

The installation

npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier
npm install --save-dev eslint-config-prettier
Copy the code

use

.eslintrc

{
  "extends": ["plugin:prettier/recommended"]
}
Copy the code

The effect is equivalent to:

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}
Copy the code

vscode setting.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.tslint": true,
    "source.fixAll.eslint": true
  },
}
Copy the code

Use the import plug-in to support aliases

Link: eslint plugin – import

The installation

npm install eslint-plugin-import --save-dev
Copy the code

use

.eslintrc

{
  "plugins":["import"]
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": "./webpack.base.config.js"
      }
    }
  },
}  
Copy the code

Vscode plug-in

Alias path completion plug-in

Links:Path Autocomplete – Visual Studio Marketplace

The installation

Vscode searches Path Autocomplete and installs

configuration

{
  "path-autocomplete.pathMappings": {
    "@": "${folder}/src"
  },
}
Copy the code

Alias path jump

Links:Alias path jump – Visual Studio Marketplace

The installation

Vscode search alias path jump and install

configuration

{" alias - skip. The mappings ": {" @" : "/ SRC / / by default only ` @ ` mapping, mapping to ` / SRC `, you can add more mapping, mapping path must begin with ` / `},}Copy the code

jsconfig.json

Find All References fails

Add the jsconfig.json file to the root directory

{
  "compilerOptions": {
    "target": "ES6",
    "baseUrl": ".",
    "jsx": "react",
    "paths": {
      "@src/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "**/node_modules/*", "dist"]
}
Copy the code