Viteのプロジェクトでeslintを使う
パッケージのインストール
$ yarn add -D eslint prettier eslint-config-prettier eslint-plugin-vue@next
セットアップ
$ yarn eslint --init yarn run v1.22.5 warning package.json: No license field √ How would you like to use ESLint? · style √ What type of modules does your project use? · esm √ Which framework does your project use? · vue √ Does your project use TypeScript? · No / Yes √ Where does your code run? · browser √ How would you like to define a style for your project? · guide √ Which style guide do you want to follow? · google √ What format do you want your config file to be in? · JSON Checking peerDependencies of eslint-config-google@latest The config that you've selected requires the following dependencies: eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest eslint-config-google@latest eslint@>=5.16.0 @typescript-eslint/parser@latest √ Would you like to install them now with npm? · No / Yes Installing eslint-plugin-vue@latest, @typescript-eslint/eslint-plugin@latest, eslint-config-google@latest, eslint@>=5.16.0, @typescript-eslint/parser@latest Done in 867.21s. .] | reify:@typescript-eslint/scope-manager: http fetch GET 200 https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.21.0.tgz 342333ms udited 421 packages in 13m
package.jsonのscriptsへ下記を追記する
"lint": "eslint --ext .js,.ts,.vue .", "lintfix": "eslint --fix --ext .js,.ts,.vue ."
実行する
$ yarn lint
Visual Studio Codeと連携する
vueファイルを保存した際にEslintでfixさせる
.vscode/settings.json ファイルを作成する
{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, }