tags: Web Programming Eslint Prettier VScode

在VScode中，使用 ESlint + Prettier 來開發 React

新版網址

1. 建立 eslint

npm init @eslint/config

2. 建立設定檔，按照以下建議回答問題

? How would you like to use ESLint? ...
  To check syntax only
> To check syntax and find problems
  To check syntax, find problems, and enforce code style
  
? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
  
? Which framework does your project use? ...
> React
  Vue.js
  None of these
  
? Does your project use TypeScript? > No / Yes

? Where does your code run? ...  
> Browser
  Node

? What format do you want your config file to be in? ...
  JavaScript
  YAML
> JSON

? Would you like to install them now? No / > Yes 

? Which package manager do you want to use? ...
> npm
  yarn
  pnpm

3. 安裝 prettier

npm install --save-dev --save-exact prettier

4. 在.eslintrc.json檔中更改設定，在extends中加入prettier

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {}
}

5. 建立.prettierrc檔，並加入設定(可自行更改)

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "all",
  "jsxSingleQuote": true,
  "bracketSpacing": true
}

6. 建立.vscode資料夾，並新增檔案settings.json，並加入以下指令

{
    "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}

7. 完成囉~這樣就只需要保存檔案他就會自動排版了，或者你也可以使用指令來進行排版，在package.json的script中新增指令

"lint": "eslint src/**/*.{js,jsx,ts,tsx,json}",
"lint:fix": "eslint --fix src/**/*.{js,jsx,ts,tsx,json}",
"format": "prettier --write src/**/*.{js,jsx,ts,tsx,css,md,json,scss} --config ./.prettierrc"

8. 新增.prettierignore檔，並將不需要排版的檔案丟進去

/node_modules
.vscode

9. 執行npm run lint的時候可能會報錯，顯示無法抓到extends中的prettier，這時候可以安裝這個檔案

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

10. 新的BUG出現，Parsing error: Unexpected token <，我透過babel來解決這個問題

npm i -D @babel/eslint-parser @babel/preset-react @babel/core

並修改.eslintrc.json

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
    "overrides": [],
    "parser": "@babel/eslint-parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "requireConfigFile": false,
        "babelOptions": {
            "presets": ["@babel/preset-react"]
        }
    },
    "plugins": ["react"],
    "rules": {}
}

11. 如果在執行npm run lint的時候出現Warning: React version not specified in eslint-plugin-react settings.，可以更改.eslintrc.json為

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
    "overrides": [],
    "parser": "@babel/eslint-parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "requireConfigFile": false,
        "babelOptions": {
            "presets": ["@babel/preset-react"]
        }
    },
    "plugins": ["react"],
    "rules": {},
    "settings": {
        "react": {
            "version": "detect"
        }
    }
}

大功告成，應該不會再有錯了吧QQ