VSCodeの開発設定2023(Web, JavaScript)

Tips

前置き

VSCodeの設定・拡張機能紹介の記事です。今回は、Web開発系のうちフレームワークを用いないシンプルな部分になります。シンプルではありますが、「HTML, CSS, JavaScript」の基本的部分（CSS, JavaScriptの一部拡張機能がNodeJS等でのライブラリインストールを想定しているものもあります。その辺は取捨選択になる場合も）だけでもそれなりのボリュームがあるので、改めてWeb系は横幅が広いなとか感じてます。

注意点

前回までの全般的設定・拡張機能を入れている前提に立っていますので、そこで紹介された拡張機能の設定が一部書いてあったり、Web系にも有用だけどそれ以外にも有用である（複数言語対応などの理由）ものですでに紹介済みであったりするものもあります。

VSCodeの開発設定2023(全般, settings.json)
前置きあと3ヵ月切ってますが、現在私がプライベートで利用している開発エディタであるVSCodeの設定とか拡張機能を公開していきたいと思います。項目が多いので複数回に分ける予定です。追記：「Night Owl」に関する設定を追加しました。追記...
tfca-wasabi.com
2023.10.14
VSCodeの開発設定2023(全般, 拡張機能)
前置き前回に引き続き、全般的(システムの種類や言語問わず、利用頻度の多い要素に対して全般的というとらえ方になっています。)なVSCodeの設定になります。前回がsettings.jsonについてでしたが、今回は拡張機能についての紹介になりま...
tfca-wasabi.com
2023.10.15

拡張機能

全部で12個の拡張機能を紹介しています。

効率化系

効率化系と題していますが、Linter, Formatterを除いたもの全てというカテゴリです。

code\
 --install-extension formulahendry.auto-rename-tag\
 --install-extension pranaygp.vscode-css-peek\
 --install-extension vincaslt.highlight-matching-tag\
 --install-extension ecmel.vscode-html-css\
 --install-extension ritwickdey.LiveServer\
 --install-extension xabikos.JavaScriptSnippets\
 --install-extension christian-kohler.npm-intellisense\
 --install-extension oouo-diogo-perdigao.docthis\
 --install-extension Orta.vscode-jest

Auto Rename Tag

HTMLタグの片方を変えると対応したもう片方のタグも変更される拡張機能。

CSS Peek

CSSとHTMLの関連づけを行ってくれる拡張機能。HTMLコード内でCSSの該当情報を確認したり、F12でCSSのコードに飛んだりできます。

Highlight Matching Tag

HTMLタグを選択すると対応したもう片方のタグがハイライト表示されます。

HTML CSS Support

HTMLとCSSで対応させて、入力補完やValidateを行ってくれる拡張機能です。

Live Server

VSCodeを利用して、即席のローカルホストサーバを立ち上げることにより、HTMLの内容をリアルタイムで表示することができます。

JavaScript (ES6) code snippets

JavaScriptやTypeScriptの高度な入力補完が行えるようになる拡張機能になります。

npm Intellisense

npm関連の入力補完が行えるようになる拡張機能になります。

Document This

JavaScriptやTypeScriptのドキュメントライティングであるJSDocのテンプレートが生成できるようになる拡張機能です。

正直、JavaのDoxygen GenetatorやPythonのautoDocstringに比べると、JavaScriptはドキュメント生成の拡張機能といったらコレ！みたいなデファクトスタンダードが無いので、モヤモヤしながら使ってます。一応、ドキュメント生成系で最もインストールされていますが、更新は2020年で止まっているので、マストアイテムは移り変わるかもですね。

Jest

JavaScript及びTypeScriptのテストであるJestと連携する拡張機能。vscodeのUI上にテスト結果を表示したりすることができる。

Linter, Formatter系

Web系の静的解析・自動フォーマットとしては4つの拡張機能を用います。

code\
 --install-extension ms-edgedevtools.vscode-edge-devtools\
 --install-extension stylelint.vscode-stylelint\
 --install-extension dbaeumer.vscode-eslint\
 --install-extension esbenp.prettier-vscode

Microsoft Edge Tools for VS Code

この拡張機能自体は、VSCode上でEdgeを開いてデバッグを行うのがメイン機能です。その中にwebhintというHTMLに関する静的解析を行うことができる機能が搭載されています。

他のLinter, Formatterと異なり、ローカルのPathを設定して連携する機能は無いので、バージョンやCI/CDの関係で動いてほしくなかったりローカルにインストールされたwebhintのみで動作させたい場合は、OFFにすることができます。またはhintrcという設定ファイルでカスタマイズすることも可能です。

Stylelint

CSSのLinterとなります。基本的にはワークスペースにインストールされたStylelintを探しに行って、見つからない場合にグローバルインストールも探しに行く順序で稼働します。それでも見つからない場合はLintしません。

何らかの理由でStylelintのPathを明示してあげる場合は設定に書くことも可能になります。

Prettierと併用する場合は「stylelint-config-prettier」を導入して競合ルールを除外すること。

ESLint

JavaScriptやTypeScriptのLinterとなります。Stylelintと同じく、基本的にはワークスペースにインストールされたStylelintを探しに行って、見つからない場合にグローバルインストールも探しに行く順序で稼働します。それでも見つからない場合はLintしない点や明示的にPathを指定する設定項目も同じです。

Prettierと併用する場合は「eslint-config-prettier」を導入して競合ルールを除外すること。

Prettier

HTML, CSS, JavaScript, TypeScriptを筆頭にGraphQLやJSONなども対象に含むことが可能なFormatterになります。スタンドアローンパッケージではPluginにより更に広大な範囲でフォーマットが可能になるFormatter界の大御所になります。

Linter系の拡張機能とは異なり、拡張機能をインストールしてデフォルトフォーマッターに指定するだけで拡張機能にバンドルされたPrettierが稼働して通常サポートの言語類はフォーマット可能になりますが、Pluginをサポート範囲にするためにはスタンドアローン版をPluginと共にローカルインストールしてあげる必要があります。Pluginが無い場合でもPrettierをローカルインストールする方法が推奨されています。

Linter系と同じくローカルインストールされたPrettierがある場合は自動で探してくれますが、グローバルインストールされたPrettierを次に探すようにするにはprettier.resolveGlobalModulesという設定をTrueにする必要があります。デフォルトではローカル → バンドル のみの検索になりますが、グローバルを探しに行かなくてもほとんど不便を感じないとは思います。また、明示的にPrettierやConfigのPathを指定することも可能です。特にprettierPathは明示的に書いておくことで、例えローカルパッケージが見つからなくてもバンドルされたPrettierを使わなくなるので、思わぬバージョンでのフォーマットを防いだりもできます。

EditorConfigの設定も拾ってくれるので、.editorconfigを書いておくとより安心ですね。

settings.json

Web系開発に関連するsettings.jsonを抜き出しました。全般で紹介した拡張機能のJS, TS用Configなんかも入っています。

ユーザー設定

ユーザー設定としてはLinterを使わないので、設定項目は少なめです。

{
  /* Web */
  "[css][javascript][typescript][javascriptreact][typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode", // Extension: Prettier
  },
  // Extension: Live Server
  "liveServer.settings.donotShowInfoMsg": true,
  // Extension: Path Intellisense(JSとTSはビルトインの機能を切る)
  "javascript.suggest.paths": false,
  "typescript.suggest.paths": false,
  // Extension: Prettier
  "prettier.printWidth": 119,
  "prettier.singleQuote": true,
}

editor.defaultFormatter

デフォルトフォーマッターにPrettierを指定しています。今回は紹介していないですが、JavaScriptのフレームワークであるReact（TypeScript含む）も共に入れてしまっています。

liveServer.settings.donotShowInfoMsg

Live Serverの起動・停止のメッセージを表示しないようにしています。

javascript.suggest.paths, typescript.suggest.paths

JavaScriptとTypeScriptのデフォルトPathサジェストをOFFにしています。全般で紹介したPath Intellisenseが競合するのでJSとTSはOFFにすることになっています。

prettier.printWidth

Prettierでフォーマットされる際の文字数を119に設定しています。これはGitHubやGitLabの折り返し目安幅です。

prettier.singleQuote

Prettierでフォーマットする際、JavaScriptやTypeScriptではシングルクォートを使用するように設定します。逆にJSX系はシングルクォートの設定を入れないようにしています。（デフォルトでOFFなので、設定をいじらない。これは他のオプションにも言えるが。）

ワークスペース設定

ユーザー設定と異なり、いくつか追加された項目があります。

{
  /* Web */
  "[css][javascript][typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode", // Extension: Prettier
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true, // Extension: ESLint
      "source.fixAll.stylelint": true, // Extension: Stylelint
    }
  },
  // Extension: Path Intellisense(JSとTSはビルトインの機能を切る)
  "javascript.suggest.paths": false,
  "typescript.suggest.paths": false,
  // Extension: Stylelint
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  // "stylelint.stylelintPath": "./node_modules/stylelint", // 自動で検出されない場合に有効化
  // "stylelint.configFile": "<stylelintrcのPath>", // 自動で検出されない場合に有効化
  // "stylelint.config"や"stylelint.configBasedir"の設定で複雑化したStylelintのカスタムも可能
  // Extension: ESLint
  // "eslint.nodePath": "./node_modules/eslint", // 自動で検出されない場合に有効化
  // "eslint.options"の設定で複雑化したESlintのカスタムも可能(ConfigfilePathの指定もここ)
  // Extension: Prettier
  "prettier.requireConfig": true,
  // "prettier.prettierPath": "./node_modules/prettier", // ローカルパッケージ使わない場合は削除
  // "prettier.configPath": "<prettierrcのPath>", // "~/.prettierrc"以外の時に有効化する
}

source.fixAll.eslint, source.fixAll.stylelint

ESLintとStylelintを実行させるためのオプションになります。

css.validate, less.validate, scss.validate

ビルトインのValidateをOFFにする設定になります。

prettier.requireConfig

.prettierrcのような設定ファイルが必須という設定になります。代わりにsettings.jsonにフォーマット設定を連ねることをやめています。

その他

各LinterやFormatterは自動で検出されますが、そうでない場合用にPath系をコメントアウトで用意しています。

最後に

フレームワークを利用していないWebフロントエンドですが、既に複雑気味ですね。

LinterやFormatterの設定値は別記事でまた書きます。

スポンサーリンク
タイトルとURLをコピーしました