VSCodeのワークスペースを設定する
VSCodeのワークスペースの使い方を改めて整理しようと思います。
今まで個人開発がメインだったので使っていませんでしたが、この度チーム開発する案件に携わることになり、ワークスペースを使いそうなのでまとめました。
1. ワークスペースを作成する
ファイル > 『名前を付けてワークスペースを保存』をクリック
保存すると、ワークスペース用のファイルが作られます。(<name>.code-workspace)
このファイルを開くことで、ワークスペースとしてプロジェクトフォルダを開くことができます。
2. ワークスペースを設定する
拡張機能の有効化/無効化 設定
ワークスペースで作業している場合、特定の拡張機能を無効化/有効化したい場合があると思います。（例えば、vue2プロジェクトではVeturを使い、vue3プロジェクトではVolarを使いたい場合など）
この場合は、各拡張機能の歯車ボタンをクリックし、『有効にする（ワークスペース）』を選択すると、ワークスペースでのみ有効化することができます。（無効化も同じ方法で出来ます）
設定を変更する
『ctrl + ,』で設定ファイルを開き、ワークスペース名が書かれたタブをクリック
-
tab sizeを２に変更する
-
Default FormatterをPrettierに設定する
-
ファイル保存時に自動でformatするように設定（「save on」で検索）
上で設定した値は、
root/.vscode/settings.jsonに書かれます。
{
"editor.tabSize": 2,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
その他必要な設定を追加。
{
"editor.tabSize": 2, //タブサイズ設定
"editor.defaultFormatter": "esbenp.prettier-vscode", //デフォルトFormatter
"editor.formatOnSave": true, //保存時に自動でフォーマットするか？YES
"[vue]": {
//vueファイルに対しての設定
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"files.eol": "\n", //ファイルの改行コードをLFに統一
//以下二つの設定がtrueになっていると、ファイル自体の設定が優先されるので、
//全体設定で決めた内容が同一に適応されない
//"editor.insertSpaces": false, //tabを押した際にspaceを挿入するか？NO
//"editor.detectIndentation": false //ファイル内容から自動でインデントを判別させるか？NO
}
↓設定を入れることで、新規作成したファイルはLFになります。
ただし、既存のファイルは変更されないので、手動で変更する必要があります。
"files.eol": "\n",
試しに、ファイルの改行コードをCRLFに変更して保存してみると、
エラー「error Delete ␍ prettier/prettier」が大量に発生する。
prettierではCRは認めてないぞ！ということですね。
新規作成されるファイルを全てLFにしておくことで、このエラーを防げます。
チーム開発の場合は、ワークスペースを活用したほうがいい。
チームで開発する際は、タブサイズなどコードの可視性に関わる部分は統一しておいた方がいい場合があります。その場合は、.vscodeファイルをコミットして管理したほうがいいので、.gitignoreファイルから、『.vscode』文字を削除してgitによって追跡されるようにします。
Discussion