人気のエディタ「VSCode」を使ってみよう

これからHTMLやCSSなどコードを書くのに便利なアプリ、「Visual Studio Code」を使ってみましょう。

おすすめの設定

Settings JSONで設定できます。
自分に必要なものだけ抜粋してもらえるといいかと
※一部、プラグインprettierの設定が入っています

{
  "breadcrumbs.enabled": false, // ファイルのパンくずリストを非表示
  "editor.tabSize": 2, // タブサイズを2に設定
  "editor.cursorWidth": 30, // カーソル幅を30に設定
  // "editor.letterSpacing": -0.4, // 文字間のスペースを設定
  "editor.minimap.enabled": false, // ミニマップを非表示
  "prettier.requireConfig": true, // Prettierの設定ファイルを必須にする
  "prettier.plugins": ["@prettier/plugin-php"], // Prettierのプラグインを設定
  "editor.formatOnSave": true, // 保存時に自動フォーマットする
  "editor.defaultFormatter": "esbenp.prettier-vscode", // デフォルトのフォーマッターをPrettierに設定
  "files.insertFinalNewline": true, // 最終行に改行を挿入する
  "files.trimFinalNewlines": true, // 最終行以降の空行を削除する
  "files.trimTrailingWhitespace": true, // 末尾の空白をトリミングする
  "javascript.updateImportsOnFileMove.enabled": "always", // ファイル移動時にインポートを更新する
  "editor.cursorBlinking": "phase", // カーソルの点滅スタイルをフェーズに設定
  "liveSassCompile.settings.formats": [
    {
      "format": "compressed", // コンパイル時のフォーマットを圧縮に設定
      //"savePath": "~/../css", // 保存パスを設定
      "savePath": "", // 保存パスの設定（コメントアウト）
      "extensionName": ".css" // 拡張子を.cssに設定
    }
  ],
  "liveSassCompile.settings.excludeList": [
    "/**/node_modules/**", // 除外リストにnode_modulesを追加
    "/.vscode/**" // 除外リストに.vscodeを追加
  ],
  "liveSassCompile.settings.generateMap": true, // ソースマップの生成を有効
  "security.workspace.trust.untrustedFiles": "open", // 未信頼ファイルの取り扱いを設定
  "explorer.confirmDelete": false, // 削除の確認
  "security.promptForLocalFileProtocolHandling": false, // ローカルファイルプロトコル処理の確認を無効化
  "files.autoSave": "afterDelay", // 自動保存を有効化
  "files.autoSaveDelay": 1000,
  "workbench.productIconTheme": "bongocat" // 自動保存の遅延時間を1秒に設定（1000ミリ秒）
}

※JSON形式で書くので、,(カンマ)が基本必要です。ただし、最後だけは ,(カンマ)を付けちゃダメです。

Web

人気のエディタ「VSCode」を使ってみよう

おすすめの拡張機能

おすすめの設定