npx create-react-app sample-ts-app-lint --template typescript
cd sample-ts-app-lint
yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
yarn add -D eslint-plugin-react eslint-plugin-react-hooks
yarn eslint --init
質問に答えていくとファイルが(.eslintrc.js)生成されます。 そこに自分でオプションを書き加えて行きます
.eslintrc.jsの例
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules": {
}
}
1:1 error 'module' is not defined no-undef
を消すために
"node": true
を記述します
eslint .
eslint --debug .
eslint --ext .js,.ts,.jsx,.tsx --ignore-path .gitignore .
DEBUG=eslint:* eslint --ext .js,.ts,.jsx,.tsx --ignore-path .gitignore .
(Macの場合です。 /User でgrep をかけています)
DEBUG=eslint:* eslint --ext .js,.ts,.jsx,.tsx --ignore-path .gitignore . 2>&1 | grep /User
eslint --print-config src/index.ts
package.jsonにも記述しておきます
"scripts": {
"lint:js": "eslint --ext .js,.ts,.jsx,.tsx --ignore-path .gitignore . ",
},
↑ yarn run lint:js で起動します
yarn add -D stylelint stylelint-config-prettier stylelint-config-standard
stylelint.config.js
module.exports = {
extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
rules: {},
}
yarn stylelint **/*.{scss,css} --ignore-path .gitignore
package.jsonにも記述しておきます
"lint:css": "stylelint **/*.{scss,css} --ignore-path .gitignore",
yarn run lint:css で実行できるようになります
huskyで消耗したくない人はこちら
husky v5 で消耗している人には simple-git-hooks がお薦め - Qiita
yarn add -D husky lint-staged npm-run-all
"lint-staged": {
"*.{ts,tsx}": "eslint",
"*.{css,scss}": "stylelint"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"scripts": {
"lint:js": "eslint --ext .js,.ts,.jsx,.tsx --ignore-path .gitignore . ",
"lint:css": "stylelint **/*.{scss,css} --ignore-path .gitignore",
"lint": "npm-run-all lint:js lint:css"
},
yarn lint-staged
動作が思ってたものと違う場合はこちらで実行して確認します
yarn lint-staged --debug
yarn lint-staged --help
npx husky-init && yarn
.husky/pre-commit が自動生成されます。
1. eslint . でエラーが出る状態にして
2. git aad -A
3. git commit
としてエラーが出ることを確認する
.vscode/settings.json
{
"tslint.enable": false,
"eslint.enable": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "typescript", "autoFix": true },
{ "language": "typescriptreact", "autoFix": true }
],
}
参考 : https://qiita.com/karak/items/12811d235b0d8bc8ad00
TIMING=1 npm run lint