Thiết lập ESlint TypeScript
Cách sử dụng:
1 2 | npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier |
Cấu hình .eslintrc
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | { "parserOptions": { "ecmaVersion": 2020, "sourceType": "module", "ecmaFeatures": { "jsx": true } }, "settings": { "react": { "version": "detect" } }, "parser": "@typescript-eslint/parser", "extends": [ "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "prettier/@typescript-eslint", "plugin:prettier/recommended" ], "rules": { "strict": ["error", "never"], "react/prop-types": 0 }, "env": { "browser": true } } |
Thiết lập đẹp hơn
Cách sử dụng:
1 2 | npm i -D prettier |
Cấu hình .prettierrc:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | { "arrowParens": "avoid", "bracketSpacing": false, "insertPragma": false, "printWidth": 80, "proseWrap": "preserve", "requirePragma": false, "semi": false, "singleQuote": true, "trailingComma": "all", "tabWidth": 2, "useTabs": true } |
Tập lệnh thiết lập trong gói.json:
Kiểm tra quy tắc eslint-typecript:
1 2 | "lint": "eslint '*/**/*.{ts,tsx}' --quiet --fix" |
Làm đẹp mã với Prettier:
1 2 | "prettier": "prettier --config ./.prettierrc.json --ignore-path ./.gitignore --write . -c" |
Ngăn chặn lỗi của ESLint và định dạng
Cài đặt lint-staged và husky
1 2 | npm i -D lint-staged husky |
Thiết lập tập lệnh lint-staged và husky trên pack.json
1 2 3 4 5 6 7 8 9 10 11 | "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.{ts,tsx}": [ "eslint --fix" ] } |