はじめに
Angular ESLint環境にPrettierを導入する方法について記載します。
Angular TSLint環境からESLintへの移行はこちら
=>[Angular] TSLintからESLintに移行する
2021/02/23 eslint-config-prettier: 8.0.0の設定方法に修正
2021年2月時点
簡単な説明
Prettierとは
コードフォーマッター
多くの言語をサポートしている。
何故Prettierを導入するのか？
- コーディングに集中できる。
- コードフォーマットの修正に時間を割かなくてよい。
- コードのフォーマットが統一できる。
- コードレビューの効率化ができる。
- スペースを空けた、空けないなどのフォーマット変更に伴う不必要な差分が発生しないため、ロジック修正へのレビューに注力できる。
ライブラリのバージョン
- eslint-config-prettier: 8.0.0
- prettier: 2.2.1
eslint-plugin-prettierについて
When searching for both Prettier and your linter on the Internet you’ll probably find more related projects. These are generally not recommended, but can be useful in certain circumstances.
First, we have plugins that let you run Prettier as if it was a linter rule:
eslint-plugin-prettier
https://github.com/prettier/prettier/blob/main/docs/integrating-with-linters.md
eslint-plugin-prettierは、非推奨となっている。
-
コーディングに集中できない。
- ESLint経由での実行となるため、lintエラーとして赤線が表示される。
- 結果、オートフォーマットされるにも関わらず修正行為を行う可能性がある。
Prettierを直接実行するよりも遅い。
連携することにより、コード破壊のリスクがある。
ライブラリのインストール
# 必要なパッケージのインストール
$npm install -D eslint prettier@latest eslint-config-prettier@latest
.eslintrc.jsonの変更
eslintrc.json
{
"extends": [
// extendsの一番下に下記を追加
"prettier"
]
}
- eslint-config-prettier: 8.0.0からprettierを追加するだけでよくなった。
VSCode extensionのインストール(VSCodeの場合)
VSCodeの設定
- 保存時にフォーマットを行う(言語指定なし)
settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
- 保存時にフォーマットを行う(言語指定ありの例)
settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": false,
"[javascript]": {
"editor.formatOnSave": true
},
"[typescript]": {
"editor.formatOnSave": true
},
}
動作確認
- 保存前
export class AppComponent {
constructor() {
const hoge = ''}
}
- 保存後
- コードのフォーマットを確認
export class AppComponent {
constructor() {
const hoge = '';
}
}