サブディレクトリで vue プロジェクトを作成し，VSCode 上で ESLint が動かない場合の対応方法

vue-cli を使ってサブディレクトリに vue プロジェクトを作成したところ VSCode 上で ESLint が上手く動かなくなり，少し詰まってしまった． 今回はその対応方法についてまとめてみる．

内容

以下のような階層で vue プロジェクトを作った場合とする．

sample_project
├── vue_app
│   ├── .browserslistrc
│   ├── .eslintrc.js
│   ├── .gitignore
│   ├── .prettierrc.js
│   ├── Dockerfile
│   ├── README.md
│   ├── babel.config.js
│   ├── cypress.json
│   ├── docker-compose.yml
│   ├── jest.config.js
│   ├── node_modules
│   ├── package.json
│   ├── public
│   ├── src
│   ├── stylelint.config.js
│   ├── tests
│   ├── tsconfig.json
│   └── yarn.lock
└──.vscode
    └── settings.json

単一ファイルコンポーネントを修正し，保存しても ESLint の警告が表示されない...

「出力」を ESLint に選択し，内容を見てみると以下のような Error が表示された．

[Error - 22:51:22] Request textDocument/codeAction failed.
  Message: Request textDocument/codeAction failed with message: Cannot read config file: /Users/hoge_user/projects/sample_project/.eslintrc.js
Error: Cannot find module '/Users/hoge_user/projects/sample_project/.eslintrc.js'
Require stack:
- /Users/hoge_user/projects/sample_project/vue_app/node_modules/eslint/lib/cli-engine/noop.js
  Code: -32603 
(node:16876) UnhandledPromiseRejectionWarning: Error: Cannot read config file: /Users/hoge_user/projects/sample_project/.eslintrc.js
Error: Cannot find module '/Users/hoge_user/projects/sample_project/.eslintrc.js'
Require stack:
- /Users/hoge_user/projects/sample_project/vue_app/node_modules/eslint/lib/cli-engine/noop.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:844:17)
    at resolveFileName (/Users/hoge_user/projects/sample_project/vue_app/node_modules/import-fresh/node_modules/resolve-from/index.js:29:39)
    at resolveFrom (/Users/hoge_user/projects/sample_project/vue_app/node_modules/import-fresh/node_modules/resolve-from/index.js:43:9)
    at module.exports (/Users/hoge_user/projects/sample_project/vue_app/node_modules/import-fresh/node_modules/resolve-from/index.js:46:41)
    at module.exports (/Users/hoge_user/projects/sample_project/vue_app/node_modules/import-fresh/index.js:14:19)
    at loadJSConfigFile (/Users/hoge_user/projects/sample_project/vue_app/node_modules/eslint/lib/cli-engine/config-array-factory.js:201:16)
    at loadConfigFile (/Users/hoge_user/projects/sample_project/vue_app/node_modules/eslint/lib/cli-engine/config-array-factory.js:284:20)
    at ConfigArrayFactory._loadConfigData (/Users/hoge_user/projects/sample_project/vue_app/node_modules/eslint/lib/cli-engine/config-array-factory.js:496:13)
    at ConfigArrayFactory.loadFile (/Users/hoge_user/projects/sample_project/vue_app/node_modules/eslint/lib/cli-engine/config-array-factory.js:416:18)
    at createCLIConfigArray (/Users/hoge_user/projects/sample_project/vue_app/node_modules/eslint/lib/cli-engine/cascading-config-array-factory.js:157:35)
(node:16876) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 8)

原因

調べてみたところ VSCode で開いたプロジェクトの直下に .eslintrc.js が無いことが原因だった．

そのためプロジェクトの直下に .eslintrc.js を置くようにすれば良いのだが，今回のようなサブディレクトリに vue プロジェクトを作った場合の構成は， .vscode/settings.jsonにeslint.workingDirectoriesを設定をする必要がある．

++  // .vscode/settings.json
++  "eslint.workingDirectories": [
++    "./vue_app"
++  ],

再び単一ファイルコンポーネントを修正し保存すると，期待通りに ESLint が警告を出ることを確認できた．

まとめと所感

今回はサブディレクトリで vue プロジェクトを作成し，VSCode で ESLint が動かない場合の対応方法についてまとめた． 知ってしまえば簡単だが，ここで詰まると Linter が動かないまま開発を進めることになるため非常に辛い状況になる．

勉強時はルートディレクトリに vue プロジェクトを作ってコードを書いていくのが普通だったため中々気づきにくかった内容ではある．

しかし，ここを知ってしまえばルートディレクトリ直下にfrontend，backendといったサブディレクトリの構成でリポジトリを作った時の VSCode の設定がわかるようになったため，良い経験だと捉えて引き続き頑張っていく．

参考記事

blogenist.jp

qiita.com