はじめに
この記事は、新米プログラマーが書いた、新米の新米による新米のためのVScode上でLint,Prettierを設定する方法の記事です。読者の対象としては、
- node.js が少しでも書ける
- npm を使った事がある（使った事がない方は、この記事を参考に→https://prog-8.com/docs/npm-package）
- VScode を使っている（使っていなくても、Lint,Prettierの設定はできる）
であれば、設定を行う事が出来る内容になっているはずです。
また、この記事は下記の 参考にさせていただいた記事 を元に、私のような新米プログラマーでも
Lint,Prettierを設定できるようにするため、コードやコマンドの具体例が多くなっています。
なので、上級者の方は下記の記事の方がスムーズに設定を行う事が出来るかもしれません。
自分に合ったものを選んでLint,Prettierを設定を行ってもらえれば良いと思います。
参考にさせていただいた記事
Prettier 入門 ～ESLintとの違いを理解して併用する～
https://qiita.com/soarflat/items/06377f3b96964964a65d
(VScodeの設定は除く)
Lint,Prettierとは
Lint,Prettier はソースコードを見やすいように自動で書き直してくれる便利なツールです。
例として「Lint適用前」と「Lint適用後」の2つのソースコードを見てみましょう。
コード例（Lint適用前）
var kuku=[]
for(var i=1;i<=9;i++) {
var tmp=[]
for(var j=1;j<=9;j++) {
tmp[j-1]=i*j
}
kuku.push(tmp)
}
console.log(kuku)
コード例（Lint適用後）
const kuku = [];
for (let i = 1; i <= 9; i++) {
const tmp = [];
for (let j = 1; j <= 9; j++) {
tmp[j - 1] = i * j;
}
kuku.push(tmp);
}
console.log(kuku);
Lint適用後のコードは適用前のコードに対して、インデントや、スペースなどが調整されて見やすくなっています。
今回の例は短いソースコードなので、少し見やすくなった程度ですが、大規模なソースコードになるとその差は圧倒的に違います！
また、誰が書いたコードでも、Lint,Prettier を適用すれば、ほぼ統一の書き方に直してくれるので、
複数人での開発やコードチェックなどがとても行いやすくなります！
そして、VScodeでLint,Prettierの設定を行えば、コードを編集して保存した瞬間、コード修正を自動で行います。
すなわち常に綺麗な状態でコードが書くことが出来るので、作業効率が大幅に良くなります！
↓ Lint,Prettier適用の利点を簡単にまとめるとこんな感じです
- ソースコードが綺麗になる！
- 複数人での開発が行いやすくなる！
- 作業効率が上がる！
手順
- npm init を行う（作業ディレクトリに「node_modules」がない場合行う）
- node.jsにLintを設定する
- node.jsにPrettierを設定する
- VScode上でファイル保存時に自動でコードの修正を行うようにする
1. npm init を行う
作業ディレクトリに「node_modules」がある場合、ここは飛ばしてください。
ターミナル（windowsの場合、コマンドプロンプト）上で行います。
コマンド実行時に実行場所が作業ディレクトリである事を確認してください。
（npm initについて→ https://techacademy.jp/magazine/16151 ）
# ターミナルで実行
$ npm init
# 下のように色々と質問されるが、とりあえず全てEnterを押すでOK
package name: (lint)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
2. node.jsにLintを設定する
まず、ターミナル上でLintをインストールします。
コマンド実行時に実行場所が作業ディレクトリである事を確認してください。
# ターミナルで実行
$ npm install eslint --save-dev
次に、Lintの初期設定を行います。
コマンド実行後の質問内容は自分の開発環境によって変更してもらっても構いませんが、
何だかよくわからないという方は下記のように選ぶとよいと思います。
# ターミナルで実行
$ ./node_modules/.bin/eslint --init
# 質問内容に答える
-----
? How would you like to use ESLint? (Use arrow keys)
# ESLintをどのように使用しますか？
To check syntax only
# 構文だけをチェックする
To check syntax and find problems
# 構文をチェックして問題を見つける
❯ To check syntax, find problems, and enforce code style
# 構文をチェックし、問題を見つけ、コードスタイルを強制する
#（上下キーでこれを選択してEnter）
-----
? What type of modules does your project use? (Use arrow keys)
# あなたのプロジェクトはどんな種類のモジュールを使っていますか？
❯ JavaScript modules (import/export)
#（上下キーでこれを選択してEnter）
CommonJS (require/exports)
None of these
-----
? Which framework does your project use? (Use arrow keys)
# あなたのプロジェクトはどのフレームワークを使っていますか？
React
Vue.js
❯ None of these
#（上下キーでこれを選択してEnter）
-----
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)
# コードはどこで実行されますか？
◯ Browser
❯◉ Node
#（上下キーでこれを選択して" i を押してから "Enter）
-----
? How would you like to define a style for your project? (Use arrow keys)
# プロジェクトのスタイルをどのように定義しますか？
❯ Use a popular style guide
# 一般的なのスタイルガイドを使う
#（上下キーでこれを選択してEnter）
Answer questions about your style
# あなたのスタイルについての質問に答える
Inspect your JavaScript file(s)
# JavaScriptファイルを調べる
-----
? Which style guide do you want to follow? (Use arrow keys)
# どのスタイルガイドをフォローしますか？
❯ Airbnb (https://github.com/airbnb/javascript)
#（上下キーでこれを選択してEnter）
Standard (https://github.com/standard/standard)
Google (https://github.com/google/eslint-config-google)
-----
? What format do you want your config file to be in? (Use arrow keys)
# あなたはあなたの設定ファイルをどのようなフォーマットにしたいですか？
❯ JavaScript
#（上下キーでこれを選択してEnter）
YAML
JSON
-----
? The style guide "airbnb" requires eslint@^4.19.1 || ^5.3.0. You are currently using eslint@6.0.1.
# スタイルガイド "airbnb"ではeslint@^ 4.19.1が必要です|| ^ 5.3.0。あなたは現在eslint@6.0.1を使っています。
Do you want to downgrade? (Y/n) Y
# ダウングレードしますか？
#（Y を入力してEnter）
-----
? Would you like to install them now with npm? (Y/n) Y
# 今すぐnpmでそれらをインストールしますか。
#（Y を入力してEnter）
次に、作業ディレクトリ内にある package.jsonの「"scripts"」の中身を下記のように変更します。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1", // 「,」をつける
"lint": "eslint --ext .js .", // これを追加
"lint:fix": "eslint --fix --ext .js ." // これを追加
},
これで、lintの設定は完了です。package.jsonが保存されているか確認してから、
下記のコマンドでlintを実行してみましょう！
# ターミナルで実行
$ npm run lint # コードのエラーを表示するコマンド
# 出力結果
1:1 error Unexpected var, use let or const instead no-var
1:9 error Operator '=' must be spaced space-infix-ops
1:12 error Missing semicolon semi
・
・
・
9:18 error Newline required at end of file but not found eol-last
9:18 error Missing semicolon semi
✖ 36 problems (35 errors, 1 warning)
30 errors and 0 warnings potentially fixable with the `--fix` option.
上記のようにエラーが表示されたら成功です！
何も表示されない場合、自分の書いたコードにエラーが無い or lintの設定が出来ていない事が考えられます。
その場合、コードのインデントをわざと崩して or 本記事のコード例（Lint適用前）をコピペして、
もう一度lintを実行してみましょう。
それでもダメな場合は、もう一度lintの設定をやり直してみましょう。
lintの実行に成功した場合、下記のコマンドで自動で修正を行ってみましょう！
# ターミナルで実行
$ npm run lint:fix # コードのエラーを修正するコマンド
# 出力結果
2:25 error Unary operator '++' used no-plusplus
4:27 error Unary operator '++' used no-plusplus
9:1 warning Unexpected console statement no-console
✖ 3 problems (2 errors, 1 warning)
コマンド実行後、コードのエラーが修正されたら成功です。
（中には自動で修正できないものもあります。その場合は自分でエラーを直すか、本記事最後の おまけ を見てください。）
3. node.jsにPrettierを設定する
Prettierについて
次のコード例を見てみましょう。3行目がやたらと長く見づらいです。
// Prettier適用前
for (let i = 1; i <= 400; i++) {
let text = i;
if (i % 3 === 0 || Math.floor(i / 100) === 3 || Math.floor(i / 10) % 10 === 3 || i % 10 === 3) text += '！'; // 長い...
console.log(text);
}
このような一行が長いコードはLintだけでは直せませんが、Prettierを使えば次のように直す事が出来ます。
// Prettier適用後
for (let i = 1; i <= 400; i++) {
let text = i;
// 複数行に別れて、一行が短くなった！
if (
i % 3 === 0 ||
Math.floor(i / 100) === 3 ||
Math.floor(i / 10) % 10 === 3 ||
i % 10 === 3
)
text += '！';
console.log(text);
}
このように、PrittierはLintでは直せないところも直す事が出来ます。
超簡単に言うとPrittierはLintの機能を拡張するものみたいな感じです。
Prettier設定手順
まずPritterに関するものをインストールします。
# ターミナルで実行
$ npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
次に、作業ディレクトリ内にある eslintrc.js の「"extends",rules」の中身を下記のように変更します。
extends: [
'airbnb-base',
'plugin:prettier/recommended'
],
rules: {
"prettier/prettier": [
"error",
{"singleQuote": true}
]
},
これで、Pritterの設定は完了です。eslintrc.js が保存されているか確認してから、
試しに一行が長いコードを書いて or 本記事のコード例（Prettier適用前）をコピペして、
ターミナル上で$ npm run lint:fix を実行してコードの修正を行ってみましょう！
4. VScode上でファイル保存時に自動でコードの修正を行うようにする
今までは$ npm run lint:fixでコードの修正を行っていましたが、
VScode上で編集後保存した時に自動でコードの修正を行う事が出来ます。
まず、VScodeのメニューから 「表示」 > 「拡張機能」 を選んでください。
そして拡張機能の検索欄に「ESLint」と検索し、「ESLint」を選んでインストールを行ってください。
その後、VScodeの左下の歯車マークをクリックして、「設定」を選んでください。
設定画面が開き、右上に {} の形があるはずです。そこをクリックすると settings.json が開きます。
settings.jsonの {} の中に次の行を追加してください。
（追加した行の前行に「,」をつける事、settings.jsonファイルの保存を忘れずに！）
"eslint.autoFixOnSave": true // これを {} の中に追加
これで設定は完了です。試しに下記のコード例（修正前）をコピペして、ファイルを保存してみましょう。
コード例（修正後）のようになれば成功です。設定お疲れ様でした！
修正されない場合、VScodeを再起動してみましょう。
// コード例（修正前）
var kuku=[]
for(var i=1;i<=9;i++) {
var tmp=[]
for(var j=1;j<=9;j++) {
tmp[j-1]=i*j
}
kuku.push(tmp)
}
console.log(kuku)
for (let i = 1; i <= 400; i++) {
let text = i;
if (i % 3 === 0 || Math.floor(i / 100) === 3 || Math.floor(i / 10) % 10 === 3 || i % 10 === 3) text += '！';
console.log(text);
}
// コード例（修正後）
const kuku = [];
for (let i = 1; i <= 9; i++) {
const tmp = [];
for (let j = 1; j <= 9; j++) {
tmp[j - 1] = i * j;
}
kuku.push(tmp);
}
console.log(kuku);
for (let i = 1; i <= 400; i++) {
let text = i;
if (
i % 3 === 0 ||
Math.floor(i / 100) === 3 ||
Math.floor(i / 10) % 10 === 3 ||
i % 10 === 3
)
text += '！';
console.log(text);
}
おまけ. Lint,Prettierで自動で修正されない部分について
Lint,Prettierを使っても自動で直してくれないエラーを表示する事があります。
しかし、コードの文法に関して間違いが無い場合、エラーを表示する部分は「それ、直す必要ある？」という物が多いです（あくまで主観ですが）。
本記事のコード例を試した方は、「i++」と「console.log()」の部分にエラー表示が出ていると思います。
ただ、「i++」に関しては、別に直さずともコードは動くし、見栄えも悪く無い。
また、出力をログに表示させたい時は「console.log()」が必要です。
なので、エラー表示を放っておいても良いですが、そのエラー表示が邪魔で仕方がないという方が私を含めいるはずです。
その際に、特定のエラー表示を無視する方法があります。（本記事で紹介するのはVScodeの方法のみです。）
特定のエラー表示を無視する方法
- エラー表示部分のコードをクリック → ちょい左上に豆電球マークが現れる。
- 豆電球マークをクリック → 選択肢が現れる。
- 「Disable 〇〇〇〇〇 for entire file」を選択 → エラー表示が消える！