【VS Code】Visual Studio Code ～ Vue拡張 ～

VS Code Vue

■ はじめに

https://dk521123.hatenablog.com/entry/2020/10/10/000000

の Vue 版。

VS Code 上で、 Vueを使った開発をしているのだが
その際に、入れたほうがいいというVSCodeの拡張機能について
情報を得たので、調べてメモる。

目次

【０】拡張機能一覧
【１】Vetur（ビュータ）
【２】ESLint (イーエスリント)
【３】Prettier（プリティア）
【４】Code Spell Checker
　無視したい単語を登録するには
【おまけ】チーム内での共有

【０】拡張機能一覧

【１】Vetur ... Vue開発での便利ツール
【２】ESLint ... コード構文チェック
【３】Prettier ... コード整形（コードフォーマッター）
【４】Code Spell Checker ... スペルチェック（typo防止）

【１】Vetur（ビュータ）

できること

１）構文の強調表示（Syntax-highlighting）
２）自動補完
３）エラーチェック
４）スニペットによる構文の候補表示
etc...

【２】ESLint (イーエスリント)

* ECMAScript（エクマスクリプト）/JavaScript のコードチェックをしてくれる

設定ファイル作成

以下をコマンドする
~~~~~~~~~~~~~~~
.\node_modules\.bin\eslint --init
~~~~~~~~~~~~~~~

<質問に答えていく>
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Does your project use TypeScript? Yes << TypeScriptを使うかどうか(y/N)
? Where does your code run? Browser
? What format do you want your config file to be in? YAML << 設定ファイルフォーマット(JS/JSON/YAML)
? Would you like to install them now with npm? No

 => 正常に完了したら「 .eslintrc.yml」ができる

ESLint ルール 一覧
https://garafu.blogspot.com/2017/02/eslint-rules-jp.html

注意点：TSLint について

* TypeScript 用の コード構文チェック として、
　TSLint があるが非推奨になっているので使用しないほうがいい

https://github.com/palantir/tslint

より抜粋
~~~~~~~~~~~~
TSLint is deprecated.
~~~~~~~~~~~~

TypeScript に関して 

* 以下、参考になりそう。

https://qiita.com/y-w/items/dcf5fb4af52e990109eb
https://dev.classmethod.jp/articles/eslint-configurations-2020/
https://dev.classmethod.jp/articles/shuntaka9576-check-eslint/
https://www.tam-tam.co.jp/tipsnote/javascript/post17695.html
https://teppeis.hatenablog.com/entry/2019/02/typescript-eslint

【３】Prettier（プリティア）

* コードを整形してくれるプラグイン
* 更に詳しい情報は、以下のサイトを参照。

https://ma-vericks.com/vscode-prettier/

使い方

* 「Shift + Alt + F」

デモ

https://prettier.io/playground/

サポート範囲

https://prettier.io/

に詳細が記載。

サポート言語 

* JavaSript/TypeScript
* CSS/Less/SCSS
* HTML
* Vue/Angular
* JSON/YAML
etc...

サポート・エディタ 

* VS Code / Visual Studio
* Vim
* Emacs
etc...

【４】Code Spell Checker ... スペルチェック（typo防止）

* 別にVueに特化している訳ではないのだが、
　タイプミスでスペルミスる時ってあると思うが
　それを防止してくれるプラグイン。
* 詳細は、以下のサイトを参照。

https://qiita.com/diescake/items/98c5a099e85775cd917d

無視したい単語を登録するには

上記のサイトにあるように
日本語のコメントがエラーになってしまうケースがあるらしいが
ホワイトリスト機能で回避できるみたい（便利！）

Vueだと、「Vuetify」「Vuex」など特有の単語も引っかかってしまうので、
使用方法をメモる。

【使用方法】 

[1] VS Code で「Ctrl ＋ ,」などで、Settingsを開く
[2] 「cSpell.ignoreRegExpList」で検索する
 => 「C Spell: Ignore Reg Exp List」が表示される
[3] 「Add Item」ボタンで単語を登録する（「OK」ボタンで保存）
 => 例えば、「Vuetify」なら「[V|v]uetify」(初めの大・小文字は同一視)を入力

【おまけ】チーム内での共有

https://kakkoyakakko2.hatenablog.com/entry/2018/10/18/003000

って記事があったので、使えそう。

.vscode/extensions.json 

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "octref.vetur",
  ]
}

関連記事

Visual Studio Code ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2019/10/20/230323
Visual Studio Code ～ TypeScript ～
https://dk521123.hatenablog.com/entry/2022/03/06/000000
Visual Studio Code ～ Python拡張 ～
https://dk521123.hatenablog.com/entry/2020/10/10/000000