ESLintとPrettierの使い方まとめ (ついでにStylelint)
jiroshin.icon ESLintやStylelintなどの設定の流れはこんな感じ。
プロジェクトでインストール→プロジェクトルートに設定ファイルを設置→エディタの設定があれば追加
ESLintのインストール
プロジェクトにESLintをインストールする。(Prettier使いたいなら後述Prettierのとこをみてね。一緒にインストールできるよ。)
Creat-React-Appで生成されたプロジェクトには元からESLintが入ってるからESLint本体をinstallする必要はない。(react-scriptsにeslint系のパッケージが含まれてる)
code:CRAでプロジェクトを作った場合/eslint本体のinstallはしていない
yarn add -D eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser
code:CRA以外でプロジェクトを作った場合(ESLint本体もinstallする)
yarn add -D eslint eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser
ESLintをグローバルにインストールしてもいいんだが、以下のような欠点がある。
- プロジェクト毎に異なるバージョンの ESLint を使えない。
- ESLint が互換性のないバージョンアップをした時に困る (1.0.0, 2.0.0 のようなメジャーバージョンアップは互換性がありません)
- 利用するプラグイン・共有設定もグローバル インストールしなければならない
- チームで同じバージョンに揃えるのが手間である
ESLint公式でもグローバルインストールはおすすめしてないのでローカルインストールを使おう。
It is also possible to install ESLint globally rather than locally (using npm install eslint --global). However, this is not recommended, and any plugins or shareable configs that you use must be installed locally in either case.
ESLintの設定ファイルを書く
↓ 設定全般はこのリポジトリが参考になる。
yarn eslint --initで対話的に.eslintrcを作ることもできるけど現状では使い物にならないらしい。
なので自分の手でプロジェクトルートに.eslintrc.jsを設置する。(Prettierも使いたいならここの.eslint.jsではなく後述のPrettierのとこみて。)
jiroshin.icon rulesに有効にしたいルールを追加していけば良い。 jiroshin.icon ちなみにプロジェクトルートに.eslint.js/jsonがない場合に親ディクレクトリに遡っていくので、PCのホームディレクトリ直下に.eslintrc.js/jsonを設置しておくとそれが参照されると思う。
code:.eslintrc.js参考
module.exports = {
env: {
browser: true,
es6: true
},
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly'
},
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true
},
project: './tsconfig.json',
sourceType: 'module'
},
root: true,
rules: {
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/explicit-member-accessibility': 'off',
'indent': 'off',
'@typescript-eslint/no-unnecessary-type-assertion': 'error',
'newline-before-return': 'error',
'no-dupe-class-members': 'error',
'no-var': 'error',
'prefer-arrow-callback': 'error',
'prefer-const': 'error',
'prefer-spread': 'error',
'require-yield': 'error'
},
};
jiroshin.icon extends のとこで別の場所にあるルールを継承できるっぽい。
エディターの設定
coc.nvimなら.vim/coc-settings.jsonに以下の設定を書いておこう。保存でautoFixが効くよ。
code:coc-settings.json
{
"eslint.enable": true,
"eslint.autoFixOnSave": true,
}
VS-codeならsetting.jsonに以下の設定を書いておこう。
code:settings.json
{
"eslint.autoFixOnSave": true,
"eslint.enable": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
]
}
jiroshin.icon VSCodeならプロジェクトルートに.vscode/というディレクトリを作って、そこにsettingsを置けばチームで同じ設定内容を共有できるので便利だね。
- ESLint 参考 -
===============================================================================
Prettierのインストール
インストールするものがたくさんあるのでpackage.jsonに以下を記述してyarn addする。
ここではESlint Prettier Stylelintをインストールしている。
code: package.json
{
"name": "HOGE",
"version": "0.1.0",
"private": true,
"dependencies": {
"@types/jest": "24.0.6",
"@types/node": "11.9.4",
"@types/react": "16.8.4",
"@types/react-dom": "16.8.2",
"husky": "^1.3.1",
"lint-staged": "^8.1.4",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"react-scripts": "2.1.5",
"typescript": "3.3.3333"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"precommit": "lint-staged",
"lint": "eslint --ext ./ 'src/**/*.{js,jsx,ts,tsx}'; stylelint 'src/**/*.css'"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^1.4.1",
"@typescript-eslint/parser": "^1.4.1",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^4.0.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jest": "^22.3.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-prefer-arrow": "^1.1.5",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-hooks": "^1.5.1",
"prettier": "^1.16.4",
"prettier-stylelint": "^0.4.2",
"stylelint": "^9.10.1",
"stylelint-config-prettier": "^5.0.0",
"stylelint-config-standard": "^18.2.0",
"stylelint-order": "^2.0.0"
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"git add"
],
"*.css": [
"stylelint --fix",
"git add"
]
},
"prettier": {
"bracketSpacing": false,
"singleQuote": true,
"trailingComma": "es5"
}
}
設定ファイルを書く
Prettierの設定の入った.eslintrc.jsをプロジェクトルートに設置しておく。
code: .eslintrc.js
module.exports = {
env: {
browser: true,
es6: true,
node: true,
'jest/globals': true
},
extends: [
'airbnb',
'plugin:@typescript-eslint/recommended',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:prettier/recommended',
'prettier',
'prettier/@typescript-eslint',
'prettier/react'
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
'__DEV__': true
},
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true
},
project: './tsconfig.json',
sourceType: 'module'
},
plugins: [
'@typescript-eslint',
'jest',
'prettier',
'prefer-arrow',
'react',
'react-hooks'
],
root: true,
settings: {
'import/resolver': {
node: {
}
},
react: {
version: 'detect'
}
},
rules: {
// eslint official
'newline-before-return': 'error',
'no-console': 'warn',
'require-yield': 'error',
// @typescript-eslint
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/explicit-member-accessibility': 'off',
indent: 'off',
'@typescript-eslint/indent': 'off',
'@typescript-eslint/no-unnecessary-type-assertion': 'error',
// prefer-arrow
'prefer-arrow/prefer-arrow-functions': [
'error',
{
disallowPrototype: true,
singleReturnOnly: true,
classPropertiesAllowed: false
}
],
// react
'react/jsx-filename-extension': [
'error',
{
}
],
'react/jsx-one-expression-per-line': 'off',
'react/jsx-uses-react': 'error',
'react/jsx-uses-vars': 'error',
'react/prop-types': 'off',
'react/prefer-stateless-function': 'off',
// react hooks
'react-hooks/rules-of-hooks': 'error',
// import
'import/extensions': [
'error',
'always',
{
js: 'never',
jsx: 'never',
ts: 'never',
tsx: 'never'
}
],
'import/prefer-default-export': 'off',
// prettierの設定はここに書いていく。
'prettier/prettier': [
'error', {
bracketSpacing: true,
printWidth: 80,
semi: true,
singleQuote: true,
trailingComma: 'all',
useTabs: false
}
]
}
};
Prettierの設定はprettier/prettierに書いていく。
エディタの設定
↓ VimのPrettierプラグインを入れておく。
↓ もしくはcocの拡張を使ってもいいかもしれないけど、Prettierプラグインの方が安定してそうだから使ってない。
code:.vimrc。deinのcocのとこに追記。
command! -nargs=0 Prettier :CocCommand prettier.formatFile
===========================================================================
Stylelintの設定を書く
今回はPrettierのインストールの時にStylelintもインストールしてたので、プロジェクトルートに.stylelintrc.jsを設置する。
code:.stylelintrc.js
module.exports = {
extends: [
'stylelint-config-standard',
'./node_modules/prettier-stylelint/config.js'
],
ignoreFiles: [
'**/node_modules/**',
],
rules: {
'indentation': 2,
'string-quotes': 'single',
'order/properties-alphabetical-order': true
},
};
エディタの設定