Visual Studio 2017で JavaScript Standard Style を使う方法
概要
- JS のフォーマットで悩む不毛な時間をなくすために Linter が欲しい。(C#はStyleCop Analyzerを使っている)
- Visual Studio のエラーウィンドウに JS のエラーを表示して C# と JS のエラーを1ヶ所で確認したい。
やること
- 最新の Node.js をインストールする。
- インストールした Node.js を VS に認識させる。
- VisualLinter をインストールする。
- ソリューションに standard をインストールする。
1.最新の Node.js をインストールする
- VS をインストールした際に Node.js が一緒にインストールされるが、バージョンが古いため最新版をインストールする。
- https://nodejs.org/ja/
2.インストールした Node.js を VS に認識させる
- VS インストール時の Node.js は VS 配下のディレクトリにインストールされ、それを参照しているため、最新版のディレクトリを参照させる。
- 1でインストールすると PATH にディレクトリが追加されるため、 VS の設定から PATH の優先順位を上げる。
3.VisualLinter をインストールする
- ESLintのエラー情報を VS のエラーウィンドウと統合するため VS の拡張機能である VisualLinter をインストールする。
4.ソリューションにstandardをインストールする
npm で standard をインストールする。
JS のファイルを開いて保存すると ESLint が動きます。出力ウィンドウで VisualLinter の詳細を見てみると node_modules が不足していることが分かります。今回は babel-eslint、eslint-config-defaults が不足しているため standard をインストールしたときと同じように不足しているものをインストールします。
この状態でもう一度 JS 保存すると .eslintrc ファイルが無いというエラーが表示されるため、プロジェクトの直下に追加します。
.eslintrc ファイルに standard の設定をします。
{ "extends": "standard" }
- 以下の画像のようにエラーを表す波線とエラーの詳細がエラーウィンドウに表示されたら standard が正常に動作しています。
まとめ
- コードのフォーマットを統一して個人開発でもチーム開発でもストレスから開放されましょう。
standard のルールに則ってオートフォーマットをする Prettier という Formatter を使うともっと幸せになれると思うので今度調べたいと思います。 github.com
私は semistandard を使っていますが、standard の方がメジャーなのでこちらで説明しています。 github.com
