前書き
eslintで、普段はairbnbを使っていたのだが、
最近は表示されなくなった1ので、standardを使ってみることにした。
その時のメモ。
standardとは
eslintで設定できるコードスタイル設計の一つ。
他のコードスタイル設計と違い、一部のルールだけ変更して使うといったことが基本的に出来ないようになっている。
これは、スタイルに対する議論は解決しないから、らしい。
末尾のセミコロンは、standardでは付けない方針なのだが、
このルールだけはセミコロンありのパッケージが用意されている。
airbnbだとセミコロンは必須のため、ここから移行する人には欲しいところ。
しかし、今回は以下の理由で使わないことにした。
- セミコロンありのパッケージがjavascriptにしかなく、typescript版にはない2
- standardのルールで、配列の最後の要素の後ろにカンマを付けないから
譲れないのがセミコロンだけならまだしも、複数あったので諦めてstandardの方針に従うことにした。
使ってみる
まずはインストール。
% npm install -D ts-standard
これだけ。eslintなどをインストールする必要はない。
使ってみる。
% npx standard
=============
WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.
You may find that it works just fine, or you may not.
SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <5.2.0
YOUR TYPESCRIPT VERSION: 5.2.2
Please only submit bug reports when using the officially supported version.
=============
typescriptの最新バージョンには対応していない時があるらしい。
マイナーバージョン違いなので、そう遠くないうちに対応されると思う。
vscodeで使う
eslintを直接使わないため、eslintの拡張機能ではエディターでエラーが表示されない。
そのため、standardの拡張機能をインストールする。
StandardJS - JavaScript Standard Style - Visual Studio Marketplace
これをインストールすると、package.jsonで該当のstandardがインストールされている場合に機能してくれる。
フォーマットする
prettierをフォーマッタとして使っている場合、設定によっては、standardのルールに従わないコードがフォーマットされてしまう。
そのため、standardのルールに従うように設定を変更する。
拡張機能のインストール
先ほどインストールしたstandardJSではフォーマットが出来ないので、別途拡張機能をインストールする。
Prettier-Standard - JavaScript formatter - Visual Studio Marketplace
公式サポート下の拡張機能ではないのだが、おそらく適切にフォーマットしてくれると思う。
2023/09/23時点追記：typescriptでsatisfiesに対応していないのを確認。
ショートカットキーの設定
option + shift + fで設定されているショートカットは、prettierのフォーマットになっている。
このショートカットのデフォルトを変更してしまうと、standardを使っていないプロジェクトでフォーマットが変わってくるので、
ワークスペースの設定で変更する。
{
"[typescript]": {
"editor.defaultFormatter": "numso.prettier-standard-vscode"
},
}
終わりに
セミコロンやカンマのルールは、慣れるまで見づらいと気がする。
かといって個別設定していくのもなんだかなぁという感じなので、様子見していこうと思う。
おまけ
typescriptでセミコロンありを使う場合のeslintの設定。
{
"overrides": [
{
"files": ["*.js", "*.jsx", "*.ts", "*.tsx"],
"extends": "standard-with-typescript",
"rules": {
"@typescript-eslint/semi": ["error", "always"],
"@typescript-eslint/no-extra-semi": "error"
}
}
]
}