Visual Studio CodeでJavaScriptをESLintとPrettierにいい具合にしてもらうための設定
Visual Studio CodeでJavaScriptをESLintとPrettierにいい具合にしてもらうための設定
Tags
Web Dev
Visual Studio Code
JavaScript
Prettier
ESLint
Published
Sep 5, 2021
📌
Visual Studio Code で JavaScript や PHP のフォーマッターを使ったり構文チェックをするには色々と設定が必要なんだって! JavaScript の構文チェックは ESLint にしてもらって、フォーマットは Prettier にしてもらう設定のメモ。 JavaScript が分からないから私には必須よね。
いろいろなことをやっているけど、実は JavaScript が分かりません。
サンプルがたくさんあったりして1から作る必要ないし、コピペでだいたいできるから覚えなくても何かしらできあがったりするんだけど、分からないものだからエラーが出たら沼落ち。
自分の力でなんとかするよりツールに頼ろうと Extension をインストールしてたけど、 Extension をインストールするだけでは機能しないものだったのね・・・というのを一昨日くらいに知ったw
設定して違う世界に行こう!と設定をしてみてるところ。

📌準備

Visual Studio Code に Extension をインストールしている必要あり

ESLint

Visual Studio Code に JSHint をインストールしていたからアンインストールして ESLint をインストールした。

Prettier

必ずといってもいいほど Visual Studio Code のおすすめの Extension みたいな記事に入っているから、だいたいの人がインストールしてるやつだよね。

プロジェクトディレクトリを作る

musk@Elisa:~$ mkdir new-project && cd $_

Node.js と npm が動くことを確認

musk@Elisa:~/new-project$ node -v
v14.17.4
musk@Elisa:~/new-project$ npm -v
6.14.14

git の初期化

musk@Elisa:~/new-project$ git init
Initialized empty Git repository in /home/musk/Business/new-project/.git/

.gitignore を作成

touch .gitignore
とりあえず、全部入りを作ってみた(クリックしてOpen)
# Linux
###  https://github.com/github/gitignore/blob/master/Global/Linux.gitignore
*~

# temporary files which can be created if a process still has a handle open of a deleted file
.fuse_hidden*

# KDE directory preferences
.directory

# Linux trash folder which might appear on any partition or disk
.Trash-*

# .nfs files are created when an open file is removed but is still being accessed
.nfs*



# Windows
### https://github.com/github/gitignore/blob/master/Global/Windows.gitignore
# Windows thumbnail cache files
Thumbs.db
Thumbs.db:encryptable
ehthumbs.db
ehthumbs_vista.db

# Dump file
*.stackdump

# Folder config file
[Dd]esktop.ini

# Recycle Bin used on file shares
$RECYCLE.BIN/

# Windows Installer files
*.cab
*.msi
*.msix
*.msm
*.msp

# Windows shortcuts
*.lnk



# node.js
### https://github.com/github/gitignore/blob/master/Node.gitignore
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test
.env.production

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

package.json の生成

yarn init -y
実行結果(クリックしてOpen)
musk@Elisa:~/new-project$ yarn init -y
yarn init v1.22.11
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
Done in 0.08s.

📌ESLint をインストール

ESLintJavaScript の構文チェックと自動修正ができるらしい。
どうして Extension のインストールだけではダメだと気付いたのかっていうとこのエラーが度々出てたから。
Failed to load jshint library. Please install jshint in your workspace folder using 'npm install jshint' or globally using 'npm install -g jshint' and then press Retry.
JSHint の Extension をインストールしていたからこのエラーがずっと表示されていたんだと思う。
調べてみると JSHint 以外に、ESLint とか JSLint ってのもあって、今は ESLint を使うのが良いらしい。たぶん。
yarn add -D eslint
実行結果(クリックしてOpen)
musk@Elisa:~/new-project$ yarn add -D eslint
yarn add v1.22.11
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 89 new dependencies.
info Direct dependencies
└─ eslint@7.32.0
info All dependencies
├─ @babel/code-frame@7.12.11
├─ @babel/helper-validator-identifier@7.14.9
├─ @babel/highlight@7.14.5
├─ @eslint/eslintrc@0.4.3
├─ @humanwhocodes/config-array@0.5.0
├─ @humanwhocodes/object-schema@1.2.0
├─ acorn-jsx@5.3.2
├─ acorn@7.4.1
├─ ajv@6.12.6
├─ ansi-colors@4.1.1
├─ ansi-regex@5.0.0
├─ ansi-styles@4.3.0
├─ argparse@1.0.10
├─ astral-regex@2.0.0
├─ balanced-match@1.0.2
├─ brace-expansion@1.1.11
├─ callsites@3.1.0
├─ chalk@4.1.2
├─ color-convert@2.0.1
├─ color-name@1.1.4
├─ concat-map@0.0.1
├─ cross-spawn@7.0.3
├─ deep-is@0.1.4
├─ doctrine@3.0.0
├─ emoji-regex@8.0.0
├─ enquirer@2.3.6
├─ escape-string-regexp@4.0.0
├─ eslint-scope@5.1.1
├─ eslint-utils@2.1.0
├─ eslint-visitor-keys@1.3.0
├─ eslint@7.32.0
├─ espree@7.3.1
├─ esprima@4.0.1
├─ esquery@1.4.0
├─ esrecurse@4.3.0
├─ estraverse@5.2.0
├─ fast-json-stable-stringify@2.1.0
├─ fast-levenshtein@2.0.6
├─ file-entry-cache@6.0.1
├─ flat-cache@3.0.4
├─ flatted@3.2.2
├─ fs.realpath@1.0.0
├─ functional-red-black-tree@1.0.1
├─ glob-parent@5.1.2
├─ glob@7.1.7
├─ globals@13.11.0
├─ has-flag@4.0.0
├─ import-fresh@3.3.0
├─ imurmurhash@0.1.4
├─ inflight@1.0.6
├─ inherits@2.0.4
├─ is-extglob@2.1.1
├─ is-glob@4.0.1
├─ isexe@2.0.0
├─ js-tokens@4.0.0
├─ json-schema-traverse@0.4.1
├─ json-stable-stringify-without-jsonify@1.0.1
├─ lodash.clonedeep@4.5.0
├─ lodash.merge@4.6.2
├─ lodash.truncate@4.4.2
├─ lru-cache@6.0.0
├─ ms@2.1.2
├─ natural-compare@1.4.0
├─ optionator@0.9.1
├─ parent-module@1.0.1
├─ path-is-absolute@1.0.1
├─ path-key@3.1.1
├─ progress@2.0.3
├─ punycode@2.1.1
├─ regexpp@3.2.0
├─ require-from-string@2.0.2
├─ resolve-from@4.0.0
├─ rimraf@3.0.2
├─ semver@7.3.5
├─ shebang-command@2.0.0
├─ shebang-regex@3.0.0
├─ slice-ansi@4.0.0
├─ sprintf-js@1.0.3
├─ string-width@4.2.2
├─ strip-json-comments@3.1.1
├─ supports-color@7.2.0
├─ table@6.7.1
├─ text-table@0.2.0
├─ type-check@0.4.0
├─ type-fest@0.20.2
├─ v8-compile-cache@2.3.0
├─ which@2.0.2
├─ word-wrap@1.2.3
└─ yallist@4.0.0
Done in 3.15s.

.eslintrc を作成

eslint --init
eslint --init すると質問されるからそれに答えていくと .eslintrc が生成される。
今回は、 HTML で読み込まれている JavaScript のエラーチェックしかしないのでこの設定にした。最適なのかどうかは不明...
選択のときの画面(クリックしてOpen)
musk@Elisa:~/new-project$ eslint --init
? How would you like to use ESLint?
  To check syntax only 
> To check syntax and find problems 
  To check syntax, find problems, and enforce code style

✔ How would you like to use ESLint? · problems

? What type of modules does your project use? …
▸ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

✔ What type of modules does your project use? · esm

? Which framework does your project use? …
  React
  Vue.js
▸ None of these

? Does your project use TypeScript? ‣ No / Yes

✔ Does your project use TypeScript? · No / Yes

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

✔ Where does your code run? · browser, node

? What format do you want your config file to be in? …
  JavaScript
▸ YAML
  JSON
musk@Elisa:~/new-project$ eslint --init
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser, node
✔ What format do you want your config file to be in? · YAML
Successfully created .eslintrc.yml file in /home/musk/new-project
ESLint の設定ファイル形式は JavaScript YAML JSON から選べるのだけど YAML にした。理由は括弧がなくて分かりやすいからなのだけど、参考にしたサイトとかはほとんど JSON だったような気がする。
設定ファイルは、読み込み優先度があるみたいだから設定ファイルを複数置いてしまったりしないように一応メモ。
  1. .eslintrc.js
  1. .eslintrc.yaml
  1. .eslintrc.yml
  1. .eslintrc.json
  1. .eslintrc
  1. package.json

📌Prettier をインストール

yarn add -D prettier
実行結果(クリックしてOpen)
musk@Elisa:~/new-project$ yarn add -D prettier
yarn add v1.22.11
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ prettier@2.3.2
info All dependencies
└─ prettier@2.3.2
Done in 1.07s.
ESLint と Prettier のフォーマットが競合しないようにプラグインが必要
yarn add -D eslint-config-prettier
実行結果
musk@Elisa:~/new-project$ yarn add -D eslint-config-prettier
yarn add v1.22.11
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ eslint-config-prettier@8.3.0
info All dependencies
└─ eslint-config-prettier@8.3.0
Done in 1.54s.

📌インストールした ESLint と Prettier の設定ファイルを書き換える

設定ファイルを書き換えたり、作成したりする前に Commit する。 何をどう変更したのかとか、追記したのかとか分からなくなるからね・・・
musk@Elisa:~/new-project$ git add .
musk@Elisa:~/new-project$ git commit -m "インストールした直後の設定"
[master (root-commit) 1ba80b6] インストールした直後の設定
 4 files changed, 958 insertions(+)
 create mode 100644 .eslintrc.yml
 create mode 100644 .gitignore
 create mode 100644 package.json
 create mode 100644 yarn.lock
ここまでできたら Visual Studio Code を起動する。
code .

.eslintrc.yml

env:
  browser: true
  es2021: true
  node: true
extends: 'eslint:recommended'
parserOptions:
  ecmaVersion: 12
  sourceType: module
rules: {}
変更前
env:
  browser: true
  es2021: true
  node: true
  jquery: true
extends:
  - eslint:recommended
  - prettier
parserOptions:
  ecmaVersion: 12
  sourceType: module
rules: {}
変更後

.prettierrc.yaml

新規で作成する。
忘れっぽいので設定DocumentsのURLとデフォルト値をコメントで入れてみた。
# https://prettier.io/docs/en/configuration.html
# https://prettier.io/docs/en/options.html
# .prettierrc or .prettierrc.yaml

semi: false # 行末の最後にセミコロンが無いとエラーになる場合はセミコロンを追加 true , 行末の最後にセミコロンを追加しない false, デフォルト値は true
singleQuote: true # 引用符にはダブルクォートの代わりにシングルクォートを使う, デフォルト値は false

# 下記デフォルト値, デフォルト値は設定(記載)不要
# printWidth: 80
# tabWidth: 2
# useTabs: false
# semi: true
# singleQuote: false
# quoteProps: "as-needed" "<as-needed|consistent|preserve>"
# jsxSingleQuote: false
# trailingComma: "es5" "<es5|none|all>"
# bracketSpacing: true
# jsxBracketSameLine: false
# arrowParens: "always" "<always|avoid>"
# rangeStart: 0
# rangeEnd: Infinity
# parser: none
# filepath: none
# requirePragma: false
# insertPragma: false
# proseWrap: "preserve" "<always|never|preserve>"
# htmlWhitespaceSensitivity: "css" "<css|strict|ignore>"
# vueIndentScriptAndStyle: false
# endOfLine: "lf" "<lf|crlf|cr|auto>"
そして Commit した。
musk@Elisa:~/new-project$ git add .
musk@Elisa:~/new-project$ git commit -m "インストール後に生成された設定ファイルに追加の設定 & 新規で作成した設定ファイル"
[master 531ba59] インストール後に生成され設定ファイルに追加の設定 & 新規で作成した設定ファイル
 3 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 .eslintignore
 create mode 100644 .prettierrc.yaml
.eslintignore .prettierignore というのもあるみたいだけど、いまのところ必要なさそうなので用意しない。

📌Visual Studio Code の設定

Visual Studio Code は、ワークスペースの直下に .VSCode に settings.json を配置すればワークスペースごとに設定を変更することができるみたいだけど、たくさんワークスペースがあるわけでもバージョン管理が必要なわけでもないから Visual Studio Code のユーザ設定の settings.json に色々と書いちゃってる。

ESLint のための追記

// ファイルを保存したときに ESLint で構文エラーか所を自動修正してくれる --fix オプションの実行
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
settings.json に追記

Prettier のための追記

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
settings.json に追記

📌その他のメモ

ESLint と Prettier と eslint-config-prettier のインストールはまとめてやるといいね。きっと。
yarn add -D eslint prettier eslint-config-prettier
 
たぶん、これで Visual Studio Code で JavaScript の構文エラーは出るようになったと思う。
Git はコミットするときにスクリプト実行させる事ができるらしくて、コミットするときにフォーマットと構文チェク&修正させることができるみたいけど、それはいつか設定してみよう。
 
設定していて、Visual Studio Code の remote の機能拡張がほとんど無効になってたことに気付いた。びっくりした。 都度、有効にしないといけないのかな。
 
設定だけして力尽きたよ!😆

EditorConfig の設定

参考にしたサイトの中に EditorConfig を設定するというのがあったのだけど、今回は使ってない。 けど、なんだか便利そうだよね。
Prettier の GitHub に設定サンプルがあった。

📌参考にしたサイトが多すぎて何をどう参考にしたのか分からない・・・

Prettier 入門 ~ESLintとの違いを理解して併用する~ - Qiita
以前は eslint --fix などで ESLint を実行時に Prettier でコードを整形し、整形したコードに対して構文チェックが実行されるようにすることが推奨されていました。 ESLint で Prettier を実行するためには、ESLint の Plugin が必要でしたが、これを利用することが公式で推奨されなくなりました( 詳細はこちら )。 そのため、記事を更新して Prettier と ESLint をそれぞれ実行させるような内容に変更しました(ついでに husky のバージョンも上げており、それに関する内容も更新しています)。 更新前のコードや記事は以下にありますので、必要に応じてご確認ください。 Prettier(v.2.3.0) に関しての備忘録です。 「Prettier の何が便利なのかよくわからない」 「ESLint と何が違うのかよくわからない」 「eslint --fixでコード整形ができるから Prettier の必要性が感じられない」 といった人達向けに書いた記事であり Prettier の基本情報、利用目的、利用方法を理解する 何故 ESLint だけではなく Prettier も利用するのかを理解する Prettier と ESLint の併用方法を理解する ことを目的としています。 ESLint 自体の説明は記載しておりませんので、ご注意ください。

📌GitHub