swchrm logs

妄想技術録

ESLint + Prettier + VSCode  〜JavaScript編〜

今更感満載ですがやりました。あと日をまたいでしまって、後半はやる気失せたまま書いたので超雑です。

背景

(あとから付け足したら)長くなってしまったー。 JavaScriptを書いているときにいちいち自分でフォーマットを整形するのがメンドクサイ。でも整形はしたい。あとはちょくちょくESLint + Prettierで幸せになれたと聞く。

で、Prettierを使うけどもそうするとESLintで弾かれる時がある。なのでESLintで弾かれないように、ESLintに合わせる形でPrettierを機能させたい。もしくは逆。

JavaScriptはES6で、TypeScriptは次にやりたいけど今は後回し。

あと既にESLintとTSLintはVSCodeにインストール済み。

疑問なのはVSCode拡張機能としてインストールしたPrettier / ESLintと、npmでインストールしたものはどう違うのか、どっちがいいのかということ。…と思ったが、VSCode以外で自分がJavaScriptを書くかと言われたら、近い未来は恐らく基本的には無いのではないかと思うので、VSCodeにさえ機能ができれば問題ない気がしてきた。あとはどのPCでも同じ設定がサッと使えるとかフォーマッティングのルールを切り替えられるとかの知識のほうが大事な気がした。なのでここを調べるモチベーションは消えた。

これを頑張ると嬉しいこと

機能的にはフォーマットをいちいち手で整形する必要がなくなる。コードが見やすくなる。ESLintとの併用でバグを防げる。(使わなくてもいいけど)

あとは(他人と)働く的な文脈ではESLint + Perriterは最近のJavaScriptを書くにあたって必要になってきている場所が多いと感じるのでそれに対応できる。

やったこと

雑に

先に箇条書きでまとめてみる。 1. PerrierをESLintに合わせる。 2. ESLintはGoogleJavaScriptスタイルガイドに合わせる。

PrettierのESLint似合わせて整形しますみたいなオプションをオンにした。あとはそれと同時に保存時に自動的に整形されるようにした。

もう少し具体的に

これに沿ってやった。 tech-1natsu.hatenablog.com

2つあるうち、自分も「1.」の方を採用した。

eslint --initがなかったので実行。実行結果は下記の通り。

 How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? None of these
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)Browser
? What format do you want your config file to be in? JSON
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint@latest
? Would you like to install them now with npm? Yes

補足知識

  • JavaScript StyleGuide ESLint、というかJavaScriptのスタイルガイドにはいくつかの種類がある。人気なのはGoogleAirBnBのそれっぽい。今回はGoogleに統一してみる。

和訳はこれ。内容の正誤は保証しないと書いてあるのでそこは注意。

cou929.nu

下記を実行。

npm install --global eslint
npm install --global prettier
npm install -d -g eslint-plugin-prettier eslint-config-prettier

かんそう

解説記事ではやたらと設定を開いたら(恐らくsetting.jsonに)この記述を追加してくださいみたいな物が多かった。けど自分の場合は設定開くとこうなるんだけど…みたいな状況だった。

f:id:swchrm:20190313133656p:plain
ここで「記述するとかではないじゃん…?」となる

次にやりたいこととしてはTypeScriptをTSLintで管理。ああいつになったら基礎は固まるのか…

結局できた感じの

npmでESLlintとprettierをインストール。そのあとeslint initをやるとルートディレクトリにeslintの設定ファイルができる。initの選択肢はこんな感じ。フォーマットはGoogleのものを採用。

MyMacBookAir:ES2015-sample swchrm $ eslint --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? None of these
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selectio
n)Browser
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Google (https://github.com/google/eslint-config-goog
le)
? 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-config-google@latest eslint@>=5.4.0
? Would you like to install them now with npm? Yes

設定ファイルはjsonを選択したのでeslintrc.jsonができた。 あとはnpmでeslint-plugin-prettierとeslint-config-prettierをインストール。こちらはなにかinitをする必要はない。 prettierもinitをする必要はなかった。

eslintrc.jsonは以下の通り。

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": ["google", "prettier"],
    "plugins": ["prettier"],
    "rules": {
      "prettier/prettier": [
        "error",
            {
                "singleQuote": true
            }
        ]
    },
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    }
}

あとはsetting.jsonで保存時にESLint機能が働くようにすればOK jsonファイル自体をいじらなくても(実際は中身をいじっているが)、ここを有効化すればOK

f:id:swchrm:20190317185426p:plain
ここをオンにします〜。

参考にした情報

qiita.com

tech-1natsu.hatenablog.com