TLDR;
Prettier と ESLint の組み合わせの公式推奨が変わり plugin が不要になった
こちらの記事で紹介されているように、ESLint でのプラグイン系が非推奨になったそうです。てことで、今後は config 系で競合ルールだけ無効にして、それぞれコード修正を走らせることになります。
で、CLI に関してはそれぞれの CLI で走らせれば良いのですが、VSCode でのファイル保存時修正もそれぞれのプラグインで走らせないといけなくて、その辺の設定を試したので紹介します。
ESLint と stylelint の設定
まずは、最小限の ESLint と styelint 環境だけ用意します
bash$ yarn add -D eslint stylelint prettier eslint-config-prettier stylelint-config-prettier npm-run-all
それぞれ {linter}-config-prettier
で競合ルールのみ無効にします
.eslintrc.jsmodule.exports = {extends: ["eslint:recommended","prettier",],}
.stylelintrc.jsmodule.exports = {extends: ["stylelint-config-recommended","stylelint-config-prettier",],}
末尾に extend してあげると、競合ルールを全てオフってくれます
CLI からは、
package.json{"scripts": {// ..."fix": "run-p fix:*","fix:eslint": "eslint . --ext .js --fix","fix:stylelint": "stylelint './**/*.css' --fix","fix:prettier": "prettier './**/*.{js,json,css}' --write",}}
とかでまわすと、競合無くフォーマットされてくれます。
VSCode の設定
リンター用のプラグインとして以下を使います
保存時コード修正の設定ですが、
ESLint, stylelint は source.fixAll.{linter}
で有効にします
.vscode/settings.json{"editor.codeActionsOnSave": {"source.fixAll.eslint": true,"source.fixAll.stylelint": true},}
prettier は、editor.formatOnsave
, editor.defaultFormatter
設定を各言語に適用することで有効にします
.vscode/settings.json{"editor.formatOnSave": false,"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": true},}
まとめると、
.vscode/settings.json{// ESLint"eslint.workingDirectories": ["./"],"eslint.options": {"configFile": "./.eslintrc.js"},"eslint.validate": ["javascript"],// stylelint"stylelint.enable": true,"stylelint.configBasedir": ".","stylelint.validate": ["css"],"css.validate": false,"scss.validate": false,// Lint On Save"editor.formatOnSave": false,"editor.codeActionsOnSave": {"source.fixAll.eslint": true,"source.fixAll.stylelint": true},"[json]": {"editor.formatOnSave": true,"editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": true},"[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": true}}
これで、それぞれのプラグインで OnSave の修正が周ります。
editor.defaultFormatter
は言語毎に設定する必要があるみたいで、React とか、TypeScript とか、SCSS とか色々使うってなるとめちゃくちゃ長くなります。
json{"[json]": {"editor.formatOnSave": true,"editor.defaultFormatter": "esbenp.prettier-vscode"},"[jsonc]": {"editor.formatOnSave": true,"editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": true},"[javascriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": true},"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": true},"[typescriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": true},"[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": true},"[scss]": {"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": true}}
うっ。。。
この辺まとめて書きたくて ["javascript", "javascriptreact"]
的な書き方ができないかなーと調べてみたんですけど、
Multiple languages specific editor settings · Issue #51935 · microsoft/vscode · GitHub
この辺のイシューが建ってはいるものの対応される予定はなさそうでした。残念。