background

  • In collaborative development, it’s hard to see where the changes are in diff because everyone uses different code formats
  • When you see esint red, you dread it. Being on ESLint feels like being in chains

The target

  • 🔨 Less dependence, just need to enable ESlint
  • 📦” zero “configuration, reduce style differences between the choice of arguments
  • 🚀 full automation, automatic repair, keep the original habit can be

Knowledge point used

  • ESLint
  • Prettier
  • EditorConfig
  • vscode

The effect

  1. Click savecommand + s / Ctrl + sPost automatic repair

  1. git commitTime automatic repair

The installation process

ESlint + Prettier configuration

Vue project

vue add eslint
Copy the code

Note: If you want to use git commit to trigger Lint operations

This option can be selected by blank

This is multiple, not single

At this point we’ll see that Vue creates an ESLint configuration file for us

// .eslintrc.js
module.exports = {
  root: true.env: {
    node: true,},extends: ["plugin:vue/essential"."eslint:recommended"."@vue/prettier"].parserOptions: {
    ecmaVersion: 2020,},rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off"."no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",}};Copy the code
/ / package. Json {" name ":" demo - vue - eslint ", "version" : "1.0.0", "description" : ""," author ":" ", "scripts" : {" test ": "echo \"Error: no test specified\" && exit 1", "lint": "vue-cli-service lint" }, "main": "index.js", "devDependencies": {" @ vue/cli - plugin - eslint ":" ^ 4.3.1 ", "@ vue/eslint - config - prettier" : "^ 6.0.0", "eslint" : "^ 6.7.2 eslint - plugin -", "prettier" : "^ 3.1.1 track", "eslint - plugin - vue" : "^ 6.2.2", "lint - staged" : "^ 9.5.0", "prettier" : "^ 1.19.1"}, "gitHooks" : {" pre - commit ":" lint - staged} ", "keywords" : [], "license" : "ISC", "lint - staged" : { "*.{js,jsx,vue}": ["vue-cli-service lint", "git add"] } }Copy the code

We can get through now

npm run lint
Copy the code

It’s time to format all the code

Because this script depends on vue-cli-service

An error is reported if the dependency is missing from the project

At this point we just need to add the dependency

npm i @vue/cli-service -D
Copy the code

The React project

Install dependencies

  1. Delete eslintCOnfig

  2. Install dependencies

    npm i babel-eslint eslint eslint-config-babel eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-standard prettier  -D
Copy the code

The final effect is shown below

Configuration Eslint
// .eslintrc.js
module.exports = {
  root: true.env: {
    browser: true,},extends: [
    "prettier"."prettier/standard"."prettier/react"."plugin:react/recommended",].plugins: ["prettier"].rules: {
    "prettier/prettier": "error",},parser: "babel-eslint".settings: {
    react: {
      pragma: "React".version: "detect",}}};Copy the code

##### Configure git hook

npm install pretty-quick husky -D
Copy the code

Note: Make sure prettier is installed before prettier is installed

Then add it in package.json

 "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"}}Copy the code

.eslintignore

Create.eslintignore in the root directory

build/*.js
src/assets
public
dist
Copy the code

Here we ignore the configuration of files, such as our packaged file dist/**, which we certainly don’t want formatted

Custom Prettier

Prettier is used for zero configuration

But default things, there will always be dislike

So Prettier still provides a few configurations for us to modify

Such as:

  • Single quotes
  • Trailing attribute retention.
  • tabWidth is2
  • seimDon’t use semicolons
  • .

Create.prettierrc.js in the root directory

// .prettierrc.js
module.exports = {
  singleQuote: true.// In normal mode, single quotes are used
  trailingComma: "es5".// Add the trailing attribute,
  tabWidth: 2.// The length of TAB is two Spaces
  semi: false.// Semicolons are not needed
  printWidth: 120.// Single line length
};
Copy the code

VScode: Check + auto fix

Install the ESLint plugin

Only VScode will be demonstrated here

Create a random file to test 1.vue

A red wavy line indicates that ESlint is configured successfully

Now let’s configure automatic repair

  1. Mac user hold downshift + command + pWake up the search bar; Windows users toF1orCtrl + shift + p
  2. The inputopen settings json

Add the following statement to settings.json

"eslint.enable": true,
"eslint.run": "onType",
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "vue",
  "html"
],
"editor.codeActionsOnSave": {
  "source.fixAll": true
},
"eslint.alwaysShowStatus": true,
Copy the code

Configuration is complete

It is recommended that you run command + q to disable VScode completely and then enable it. You can directly disable VScode for Win users

Avoid code clutter that may occur during formatting later

EditorConfig

If you’re not sure what EditorConfig is, go to the EditorConfig website

Create.editorConfig in the root directory

# https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
Copy the code

Then install the plug-in

How to promote

Vscode prompts you to install the plug-in

Create vscode/extensions. Json

{
  // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp

  // List of extensions which should be recommended for users of this workspace.
  "recommendations": ["dbaeumer.vscode-eslint", "editorconfig.editorconfig"],
  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
  "unwantedRecommendations": []
}
Copy the code

When a new developer takes over the project

Type @recommended to see that we prompt the user to install the appropriate plug-in

No intrusion

If installed as a React project, you don’t need to look any further

Git hooks installed according to vue Add ESLint

 "lint-staged": {
    "*.{js,jsx,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
Copy the code

Such a scenario is globally changing

If some projects are diff by hand, this will definitely break the original online and developed version, and the subsequent diff will be inconvenient

Git hook: vue add ESLint git hook: vue add esLint

npm install pretty-quick husky -D
Copy the code

Note: Make sure prettier is installed before prettier is installed

Then add it in package.json

 "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"}}Copy the code

So when a new developer comes in, the entire configuration of this article will be insensitive to him. For example, if the ESlint plugin is not installed, he will not report an error. If he does not report an error, he will not be insensitive

Only modify the commit file per commit, a gradual change that would make the entire ESlint scheme unknown

reference

  1. Efficient Code Analyzing and Formatting (for Vue.js) with ESLint and Prettier
  2. Efficient Code Analyzing and Formatting (for React) with ESLint, Prettier and VSCode — 2020 Edition