大人気のテキストエディタで既にたくさんの記事も出ておりますが、
こちらでは、コーディングに特化した機能を紹介していきたいと思います。
※macOS版にて紹介していきます。
基本設定
まずは基本的な設定からです。
言語を選択
エディタを好きな言語に変更できます。
※日本語設定で紹介していきます。
設定
View > Command Palette > Configure Display Language > 言語を選択 > エディタを再起動
テーマを選択
自分の好きなテーマに変更できます。
設定
Code > 基本設定 > 配色テーマ
setting.json
設定した項目はsetting.jsonに保存されます。
設定
Code > 基本設定 > 設定 > アイコンクリック
おすすめの拡張機能
Project Manager（プロジェクトマネージャー）
プロジェクト管理ができる拡張機能です。
使用したいプロジェクトを登録し、素早く開くことが可能になります。
これで毎回Finderから探す手間もなくなります、単一で開いてくれるのでパフォーマンスも良いです。
操作
登録したいプロジェクト開き保存します、開いたディレクトリをルートとして登録できます。
Live Server（ライブサーバー）
エディタをブラウザに自動反映できる拡張機能です。
保存した際に自動でブラウザが更新されます。
次に紹介するLive Sass Compilerと合わせて使用もとてもおすすめです。
※PHPファイルは対応していないようです。
操作
エディタ下部にあるGo Liveをクリックするだけで自動でブラウザが立ち上がります。
Live Sass Compiler（ライブサースコンパイラー）
Sassのコンパイルができる拡張機能です。
ワンボタンで素早くコンパイルができ、ファイル保存時の自動コンパイルやにも対応しています。
他にもオプション設定を加えることで、追加機能や細かい調整が可能です。
設定
オプション設定はsetting.jsonに追記していきます。
Formats
"liveSassCompile.settings.formats": [
{
"format": "compact",
"extensionName": ".css",
"savePath": "./css"
}
],
format
コンパイル後のスタイルの形状を指定します。
| nested | expanded | compact | compressed |
|---|
extensionName
拡張子を指定します。
savePath
出力先を指定します。
※ディレクトリが存在しない場合も自動生成してくれます。
Exclude List
除外したいファイルを指定できます。
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**",
".history/**"
],
Autoprefix
ベンダープレフィックスを出力できます。
ファイル保存時の自動出力にも対応しています。
また、どのくらい古いバージョンのブラウザに対応するかおおよその設定ができます。
ベンダープレフィックスの出力をオフにしたい場合は[]のみに設定します。
"liveSassCompile.settings.autoprefix": [
"last 2 versions",
"ie >= 11",
"Android >= 4",
"ios_saf >= 8"
],
操作
エディタ下部のWatch Sassをクリックするとコンパイルできます。
おすすめのエディタ機能
ここからはコーディングやプログラミングの入力が捗るエディタ機能を紹介していきます。
User Snippets（ユーザースニペット）
登録したコードを瞬時に呼び出せる機能です。
呼び出した後に指定した箇所へカーソルが移動するように設定できます、複数順番まで細かく指定可能です。
設定
Code > 基本設定 > ユーザースニペット
作成したい言語を選択すると自動でjsonファイルが生成されるので書き込んでいきます。
試しにHTMLのpictureタグを設定していきます。
"picture": {
"prefix": "pic",
"body": [
"<picture>",
"\t<source media=\"(min-width:768px)\" srcset=\"./img/$1.png\">",
"\t<img src=\"./img/sp/$1.png\" alt=\"$2\">",
"</picture>"
]
}
・prefix
呼び出し時のネームを入れます。
・body
呼び出したいコードを書いていきます。
記述ルールはサンプルを参照して下さい。
$ + 数字でカーソルが移動される順番を指定できます、同じ数値にすると同時入力ができます。
操作
prefixに入力したネームを入力した後に、Enterキーで呼び出します。
Tabキーを押していくと、$ + 数字 で設定した順にカーソルを移動できます。
Emmet（エメット）
VSCodeではデフォルトで使用できます。
上記で紹介した、ユーザースニペットと組み合わせて使用すれば、さらに効果を発揮できます。
キーマップ
おなじみの人気エディタのショートカットキーが使えるようになります。
設定
Code > 基本設定 > キーマップ
設定をプロジェクトごとに分けたい場合
ワークスペース
プロジェクトごとに設定を変更したいケースが出てくるかと思います、そんな時はワークスペースを使用して個別に設定を管理できます。
※ワークスペースで保存すると、プロジェクトのルート直下にsetting.json隠しファイルが生成されます。
設定
Code > 基本設定 > 設定 > ワークスペース > アイコンクリック
以上がおすすめの設定でした、最後までご覧戴きありがとうございました。