最初に
vscodeは様々な機能を持っているため、様々な用途に使われます。
なので、結局設定は人によるのですが、ごちゃごちゃうるせえという方はこの設定を映せばなんとかなります。なんとかならなかったら、追記するので連絡を。
vscodeのインストール
download for windows的なのをクリックします。Macの方は下三角ボタンを押して、MacOSを選択してください。言い忘れていますが、私はMacに関してはよく分からないので、頑張って読み替えて進めてください。
インストーラーがダウンロードされるので、開いてインストールしましょう。
同意するを選択して次へ→何も変更せず次へ→何も変更せず→全ての選択肢にチエックマークを付けて次へ→インストールをクリック
の流れでインストールすると良いと思います。
vscode基本設定編
vscodeを開くとこんな感じの画面が出現します。ご覧の通り全部英語になっています。私は英語という高級言語はまだ習得していないので、日本語に変更しましょう。
上の写真だと赤線に囲まれている積み木マークをクリックしましょう。 拡張機能を入れられるページに跳べます。
検索欄のようなものが出現するので、Japaneseと入力します。
一番上 にMicrosoft公式が出している地球儀マークの項目が出てくるので、これをインストールします。
青いインストールボタンを押してください。
インストールが完了すると、vscodeの右下にこんなポップアップが出現します。
Change Language and Restartを押して、 vscodeを再起動させると使い慣れた日本語になっていると思います。
gitの環境構築
gitを利用する場合はここでgitの環境構築をしておくことをお勧めします。
gitって何という方は飛ばしてください。
gitの記事に関しては記事を制作中です。もうしばらくお待ちください。
拡張機能について
gitのguiとして使う方は、拡張機能として利用する方は読み飛ばしてください。
必須レベルで入れた方が良いもの
基本的に各言語の言語パックは入れましょう。
つまり、C言語を入れるならC言語の言語パック、PythonをやるならPythonの言語パックを入れましょう。(htmlとjavascriptについては、後述します。言及するまで、サラサラと読み流してください。)
言語パックの入れ方ですが、
適当に入れたい言語のソースコードを開きましょう(拡張子さえあっていれば、中身が空でも可)。
C言語の場合は、ファイルを開いて数秒待つと、右下にこのようなポップアップが出現します。vscodeのポップアップは、webサイトのポップアップのようにウザイ広告が表示されるようなことはなく、役に立つメッセージしか表示されないので、ポップアップと仲良くなることをお勧めします。
インストールを押すと、勝手に役立つ拡張機能を入れてくれます。
勝手に拡張機能を選んでくれてインストールされるので便利ですね。
(C言語の場合は、このようなポップアップが出現しますが、面倒くさい設定をしなければならないので×を押して閉じても構いません。)
ちなみに、htmlとjavascriptのファイルを開いてもこのようなポップアップは出現しません。標準で他の言語と同様の機能がvscodeにくっついてきているので、入れる必要がないのですね。
マイコンをやる方
マイコンを触る方は、PlatformIO IDEを入れることをお勧めしますが、マイコンを初めて触る方は開発環境は教材に合わせることをおすすめします。
PlatformIO IDEについては、この記事で紹介しています。
html/cssやjavascriptを書く方
拡張機能は入れる必要はないとさっき言及したのですが、コードフォーマッタ を入れるのをおすすめします。というか入れましょう。
コードフォーマッタとは自分が書いたコードを自動で綺麗に整えてくれるツールのことです。ある程度ならどれだけ散らかしても、綺麗に整理整頓された部屋に片づけてくれるみたいな感じです。便利ですね。
コードフォーマッタは色々あるのですが、html/css,javascriptなら Prettier が王道です。
日本語の拡張機能を入れた時のように、
検索欄に今度はPrettierと入力して、一番上に出てきてダウンロード数が段違いに多いやつをインストールしましょう。
Ctrl + ,を押してください。ちなみにこのショートカットキーは覚えなくても困ることはありません。
設定画面が表示されます。
Prettierを使う上で便利な設定を教えたいと思います。
検索欄にformat on saveと入力します。
赤丸で囲んだところのチェックボックスにチェックを入れます。
検索欄に今度はdefault Formatterと入力します。
赤丸で囲ったところがなしになっているので、Prettier - code formatterに変更します。
こうするとソースコードを保存(ctrl + s)をしたときに、自動でコードが整形されます。
Markdownファイルをフォーマットさせない方法
デフォルトだとmarkdownファイルもフォーマットされ、表示崩れの原因になります。以下の設定をお勧めします。
markdownファイルを書かないかたは無視してください。
設定方法
ctrl + shift + pを押して、入力欄にsetting jsonと入力します。
基本設定:ユーザー設定を開く(JSON) をクリックすると、setting.jsonファイルが開かれます。
setting.jsonファイルに以下の文を追記します。
"[markdown]": {
"editor.formatOnSave": false
}
これでフォーマットされなくなります。
pathの自動補完機能
スペルミスとかファイルの階層を間違えて、インポートできないと言って沼りがちなパスの指定も自動補完にすることで、ミスを減らせます。
拡張機能の検索欄にPath Autocompleteと入力します。
赤線の拡張機能をインストールしましょう。
使い方は簡単で相対パスを書くときに、先頭を省略するのではなく、./から始めるとサジェストにファイル名やフォルダ名が出るようになります。
まとめ
環境構築は沼ったら人に聞く、ググる、ChatGPTに聞くのが大事。
悩んでも何一ついいことないからね。