1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

VScode 環境構築&おすすめ拡張機能 AppleシリコンMac編

Last updated at Posted at 2024-11-08

VSCodeとは

Microsoftが提供をしているコードエディターのことです。

VSCodeのダウンロード&インストール

以下がVSCodeの公式サイトです。こちらのリンクから飛べます
VSCode

VSCodeでZipファイルがダウンロードできたら
Zipファイルを解凍しappフォルダにコピーをします。

VSCodeの起動と日本語化

インストールができたVSCodeのアイコンを押して起動をします。
スクリーンショット 2024-11-07 23.29.46.png

VSCodeを起動すると英語で書かれていると思います。
それを日本語化するにはまず、
スクリーンショット 2024-11-07 23.31.39.png
四角い赤色で囲った部分(拡張機能)のところを押します。
そうして、検索バーにJapaneseと入力することで、以下の画像のようなものが出ます。
スクリーンショット 2024-11-07 23.32.33.png
これをインストールすることで日本語化できます。

コマンドライン(ターミナル)からのVSCodeの起動

これは、ターミナル上でcode .とコマンドを入力することによってその場所のディレクトリをVSCodeで開くことができます。
以下が手順です。

  1. VSCodeの起動

  2. コマンドパレット(⌘+shift+P)を開く、Shell Commandと入力
    スクリーンショット 2024-11-07 23.50.45.png

  3. シェル コマンド: PATH内にcodeコマンドをインストールしますを押す

  4. codeコマンドをインストールする

  5. ターミナルを開き、開きたいディレクトリまで移動をして code .と入力するとVSCodeが開く
    開けたら完成です。

おすすめ拡張機能

Prettier - code formatter

HTML,CSS,JavaScriptなど書くときに形を整えてくれる
スクリーンショット 2024-11-08 0.06.40.png

indent-rainbow

インデントがとてもわかりやすくて便利!
Pythonを使うときにとても使いやすい
スクリーンショット 2024-11-08 11.02.47.png

Live Server

HTML,CSS,JavaScriptなどのWeb開発をするときに便利
サーバーを立ち上げてくれる!
スクリーンショット 2024-11-08 11.07.59.png

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?