JavaScript のフレームワーク、Vue.js を使用した開発の際に便利だった、ESLint とPrettier について記述。また、設定方法も記述する。これも何番煎じかわからない。
ここで説明すること
- ESLint とPrettier について簡単な概要
- ESLint とPrettier をVue.js を使ったプロジェクトにインストールする方法、設定方法
ESLint
JavaScript の構文チェックツールのこと。
構文のエラーを見つけたり、構文のスタイル(構文で使用しているカッコやスペースの使い方)を統一したりすることができる。
https://eslint.org/
Prettier
Prettier はソースコードを整形してくれるツールのこと。
JavaSrcipt やVue.js、CSS、SCSS等のソースコードを整形してくれる。
https://prettier.io/
ESLint とPrettier を併用するメリット
ESLint は構文チェックをしてくれる。しかし、「ソースコードを整形してくれる」という点ではESLint とPrettier で共通している。別にどちらかを使えばよいのでは??となるが、ESLint だけだと整形のチェックをしてくれる範囲が狭い。しかし、Prettier はESLint では整形できない部分をカバーしてくれるため、今回はESLint とPrettier を併用する。
インストール
Vue.js を使ったプロジェクト(vue-cli を使って作成したプロジェクト)が存在していることを前提に記述する。
ターミナルを開いて、Vue のプロジェクトのディレクトリ内且つpackage.json のファイルが存在するディレクトリ内で以下のコマンドを実行し、ESLint とPrettier のパッケージをインストールする。(今回はyarn コマンドで実行)
yarn add -D eslint eslint-config-prettier eslint-plugin-prettier
yarn add -D prettier prettier-eslint prettier-eslint-cli
.eslintrc.js の設定
インストール後、.eslintrc.js を開き、以下を記述する。(ない場合は作成)
extends の部分には以下を記述。
extends: [
'plugin:vue/essential',
"eslint:recommended",
"plugin:vue/recommended",
"plugin:prettier/recommended"
],
rules の部分には以下を記述。
rules: {
"semi": [2, "never"],
"quotes": [2, "single"],
"single": { "allowTemplateLiterals": true },
"no-console": "off",
"vue/max-attributes-per-line": "off",
"prettier/prettier": ["error", { "semi": false, "singleQuote": true }],
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
rules の部分にeslint を使って構文をチェックしたりコードを整形したりするためのルールを決めている。
以下では主な構文ルールを説明する。
- semi : 構文の末尾にセミコロンをつける (今回は付けない設定)
- quotes : 文字列はダブルクォートで記述 (今回はシングルクォートに設定)
- no-console : console の使用をしないこと (今回は使っている)
また、prettier でのコードの整形ルールも決めている。構文の末尾はセミコロンなし、文字列はシングルクォートのルールを設定している。そうではなかった場合は警告を表示するようにしている。
Prettier でも整形のルールを細かく決めることができるが、今回は、特に凝ったルールを決めていないため、無駄な改行があったりスペースがあったりした際に警告が表示されるようにしている。
※エラーではなく警告のため、警告が表示されていてもコーディングはできる。ただし、警告がうるさい…。
lintfix コマンドでの一発整形
コーディングして、気づいたらめちゃめちゃESLint やPrettier の警告文出ていた…ということがあるため、そういうときにターミナルからコマンドyarn lintfix
で一気に整形してくれるようにpackage.json に以下を記述する。
"scripts": {
"lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore --ignore-path .eslintignore ."
}
参考URL
ありがとうございました。
https://qiita.com/mysticatea/items/f523dab04a25f617c87d
https://qiita.com/kashimura0001/items/f2270364d57e1828ea78
https://garafu.blogspot.com/2017/02/eslint-rules-jp.html