Visual Studio Code

Windows 環境でのインストール

Linux 環境でのインストール

  • マイクロソフトリポジトリからインストールする方法
    https://code.visualstudio.com/docs/setup/linux#_debian-and-ubuntu-based-distributions
    $ curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
    $ sudo install -o root -g root -m 644 packages.microsoft.gpg /usr/share/keyrings/
    $ sudo sh -c 'echo "deb [arch=amd64 signed-by=/usr/share/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'
    $ sudo apt-get install apt-transport-https
    $ sudo apt-get update
    $ sudo apt-get install code # or code-insiders

拡張機能の導入

  • Activitus Bar
    設定(Ctrl + ,)で右上の[設定(JSON)を開く]アイコンをクリック
    settings.json
    "activitusbar.views": [
        {
            "name": "explorer",
            "codicon": "files"
        },
        {
            "name": "search",
            "codicon": "search"
        },
        {
            "name": "scm",
            "codicon": "source-control"
        },
        {
            "name": "debug",
            "codicon": "debug-alt"
        },
        {
            "name": "extensions",
            "codicon": "extensions"
        },
        {
            "name": "command.workbench.action.terminal.toggleTerminal",
            "codicon": "terminal"
        },
        {
            "name": "settings",
            "codicon": "gear"
        },
        {
            "name": "extension.project-manager",
            "codicon": "file-submodule",
        }
    ],
  • Draw.io Integration
    拡張子 .drawio.svg のファイルを作成
    Draw.io VS Code Integration
  • Japanese Language Pack
  • Marp for VS Code
    Marp for VS Code
  • Project Manager
    コマンドパレット(F1)でProject Manager: Save Project
  • Remote SSH

環境設定

  • タイトルバーのカスタマイズ
    設定(Ctrl + ,)でwindow.titleBarStyleを検索してcustom
  • アクティビティバーの非表示
    表示 > 外観 > アクティビティ バーを表示する を切り替え

コード整形関連(ESLint / Prettier)拡張機能の導入

  • ESLint 拡張機能を VSCode にインストール
  • Prettier 拡張機能を VSCode にインストール
  • 環境設定
    settings.json
    {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnPaste": true,
      "editor.formatOnSave": true,
      "editor.formatOnType": true,
      "editor.codeActionsOnSave": [
        "source.organizeImports",
        "source.fixAll.eslint"
      ]
    }

プロジェクト毎のコード整形関連(ESLint / Prettier)の設定

  • eslint, eslint-config-prettier, prettier のインストール

    npm install --save-dev eslint eslint-config-prettier prettier

  • eslint の初期設定

    npx eslint --init

  • .eslintrc.json の修正

    .eslintrc.json
    "extends": [
      "airbnb-base",
      "prettier"
    ],
    .eslintrc.json
    "rules": {
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
    }

  • prettier の設定

    .prettierrc
    {
      "printWidth": 100,
      "trailingComma": "es5",
      "tabWidth": 2,
      "semi": true,
      "singleQuote": true,
      "endOfLine": "lf",
      "extends": ["prettier"]
    }
▲