Webpack Dev Serverで ESLint, Stylelint, Prettierの自動整形をまわす.
LP制作でもWebpackを挟みたい の続き.
WebpackDevServerに, リンターと整形フロー挟んでいこうみたいな.
eslint
JavaScript
を解析して良くないところ(未使用の変数が定義されてるよ, シンタクスエラーがあるよ, …etc)
を教えてくれるツール.
一部に関しては, 自動修正も可能.
stylelint
eslintの CSS
版.
prettier
コード整形ツール.
上の2つと違って, コードスタイル(好み)に合わせてコードを書き換えてくれるもの.
文字列には, ダブルクォーテーションを使おうとか, 文末にセミコロンは置かないとか, そういうのを統一できる.
ビルドフローで自動整形したい
前者2つで逐一解析を入れればコーディングが捗るし, スタイルが統一されていると見やすいからファイル更新と同時に逐一これらを回したい.
VSCodeのプラグインを使って, ファイルが保存されたときに整形する記事が結構見つかるけど, エディタの種類とか設定に依存するのが嫌だったので, Webpack Dev Serverのビルドフローに挟むことにした.
prettierは, eslint と stylelint の上で動作させる.
ESLintの設定
// .eslintrc.js
module.exports = {
parser: "@typescript-eslint/parser",
parserOptions: {
"project": "./tsconfig.json"
},
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
plugins: [
"@typescript-eslint"
],
rules: {
"no-console": "off"
}
}
TypeScriptを使うので, パーサーと tsconfig.json
を指定しつつ, ルールを entend する.
eslint
や stylelint
にも, prettier
で担当するようなルール(前述のセミコロンとか, etc)があって,
こういうコードスタイルに関するルールを打ち消して prettier
の設定で上書きするのが,
prettier plugin
なので, これは最後に書いてあげる.
Stylelint
// .stylelintrc.js
module.exports = {
extends: [
"stylelint-config-recommended",
"stylelint-config-standard-scss",
"stylelint-prettier/recommended"
],
plugins: [
"stylelint-scss",
"stylelint-prettier"
],
rules: {
"prettier/prettier": true
}
}
eslint
同様に, prettier
は最後に.
Prettier
// .prettier.js
module.exports = {
tabWidth: 2,
semi: false,
singleQuote: true,
trailingComma: 'none',
bracketSpacing: true,
arrowParens: 'always'
}
Webpackの設定
// webpack.config.js
module.exports = {
...
},
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: "ts-loader",
options: {
transpileOnly: false
}
},
{
loader: "eslint-loader",
options: {
// eslint config
enforce: 'pre',
configFile: path.resolve(__dirname, '.eslintrc.js'),
cache: true,
fix: true
}
}
],
exclude: /node_modules/
},
...
]
},
...
plugins: [
...
new StyleLintPlugin({
// stylelint config
files: ['**/*.scss'],
syntax: 'scss',
fix: true
})
]
}
eslint-loader
と style lint plugin
に fix オプションをつけて, 自動整形ができるようになった.
CUIからリントしたいときは,
$ yarn run eslint **/*.ts -c .eslintrc.js --fix
$ yarn run stylelint **/*.scss --syntax scss --fix
みたいに, option
で渡してる情報を渡してあげれば良いだけ.