ESLintとPrettierでlintとformatをする
$ pnpm add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb eslint-config-airbnb-typescript eslint-config-prettier prettier husky lint-staged
package.jsonのnpm scriptsに次の内容を追加する。
code:json
{
"scripts": {
"prepare": "husky install",
"lint": "tsc -p tsconfig.json --noEmit && eslint --no-error-on-unmatched-pattern --cache --fix src scripts"
"format": "prettier --no-error-on-unmatched-pattern --write src scripts",
"test": "jest --passWithNoTests"
}
}
コミット前およびプッシュ前にlint-stagedを実行するように設定する。
Git Hooksを管理するツールであるhuskyと、Gitのステージ上のファイルを対象とするコマンドを実行できるlint-stagedを組み合わせると、コミット前やプッシュ前にコードフォーマットやLintを実行できる。リポジトリ内でコーディングルールやフォーマットを徹底させることができる。 $ pnpm exec husky add .husky/pre-commit "pnpm exec lint-staged -c pre-commit.lint-staged.config.js"
$ pnpm exec husky add .husky/pre-push "pnpm exec lint-staged -c pre-push.lint-staged.config.js"
code:.eslintrc.cjs
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
overrides: [
{
env: {
node: true,
},
parserOptions: {
sourceType: 'script',
},
},
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: 'tsconfig.json',
},
rules: {
'import/extensions': 'off', 'import/prefer-default-export': 'off', 'import/no-relative-packages': 'off', 'react/function-component-definition': [
'error',
{
namedComponents: 'arrow-function',
unnamedComponents: 'arrow-function',
},
],
'react/react-in-jsx-scope': 'off', },
};
code:.prettierrc
{
"printWidth": 100,
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"endOfLine": "lf"
}
code:pre-commit.lint-staged.config.js
export default {
'*.{js,jsx,ts,tsx}': [
() => 'pnpm run format',
],
};
code:pre-push.lint-staged.config.js
export default {
'*.{js,jsx,ts,tsx}': [
'pnpm run test',
() => 'pnpm run lint',
],
};