officeFITPlus blog

ファイナンシャルプランナー資格を持つエンジニアのお金やIT関連の備忘録
2023-03-21

VS Codeで使用中の拡張機能一覧と設定内容

VSCode
VS Codeお気に入りの拡張機能リスト
名前 目的 用途
vscode-icons 環境整備 エクスプローラーでアイコン表示
zenkaku 環境整備 全角文字強調表示
Highlight Matching Tag 環境整備 対になるタグをハイライト表示
AutoRenameTag 環境整備 対になるタグを同時に変更
Color Highlight 環境整備 カラーコードを色表示
IntelliSense for CSS class names in HTML HTML CSS Support 効率化 id, クラス名
Path Autocomplete 効率化 ファイルパス
WordPress snippets 効率化 WordPress関数補完、予測
JavaScript (ES6) code snippets 効率化 JavaScript
CSS Peek 効率化 CSS定義確認
PHP Intelephense 効率化 関数・メソッド定義へジャンプ
HTMLHint 構文チェック HTML
ESLint 構文チェック JavaScript
Stylelint 構文チェック CSS/Sass/Scss
Live Server デバッグ ローカルサーバー起動(HTMLファイル用)
PHP Server デバッグ ローカルでPHPファイル実行
REST Client デバッグ API
PHP Debug デバッグ ステップ実行
PHP Extention Pack デバッグ
LPなど小規模開発でのみ使うVSCode拡張機能
名前 目的 用途
JS & CSS Minifer 効率化 ワンクリックでminify化
VS Codeで必ず行っている設定 
{
  "liveServer.settings.CustomBrowser": "chrome",
  "workbench.iconTheme": "vscode-icons",
  "workbench.startupEditor": "none",
  "intelephense.stubs": [
    "apache",
    "bcmath",
    "bz2",
    "calendar",
    "com_dotnet",
    "Core",
    "ctype",
    "curl",
    "date",
    "dba",
    "dom",
    "enchant",
    "exif",
    "FFI",
    "fileinfo",
    "filter",
    "fpm",
    "ftp",
    "gd",
    "gettext",
    "gmp",
    "hash",
    "iconv",
    "imap",
    "intl",
    "json",
    "ldap",
    "libxml",
    "mbstring",
    "meta",
    "mysqli",
    "oci8",
    "odbc",
    "openssl",
    "pcntl",
    "pcre",
    "PDO",
    "pdo_ibm",
    "pdo_mysql",
    "pdo_pgsql",
    "pdo_sqlite",
    "pgsql",
    "Phar",
    "posix",
    "pspell",
    "readline",
    "Reflection",
    "session",
    "shmop",
    "SimpleXML",
    "snmp",
    "soap",
    "sockets",
    "sodium",
    "SPL",
    "sqlite3",
    "standard",
    "superglobals",
    "sysvmsg",
    "sysvsem",
    "sysvshm",
    "tidy",
    "tokenizer",
    "xml",
    "xmlreader",
    "xmlrpc",
    "xmlwriter",
    "xsl",
    "Zend OPcache",
    "zip",
    "zlib",
    "wordpress"
  ],
  "php.debug.executablePath": "/opt/homebrew/opt/php@8.1/bin/php",
  "php.cs-fixer.onsave": true,
  "php-cs-fixer.executablePath": "${extensionPath}/php-cs-fixer.phar",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  "files.trimFinalNewlines": true,
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": false,
  "editor.copyWithSyntaxHighlighting": false,
  "editor.renderWhitespace": "all",
  "editor.showFoldingControls": "always",
  "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?。、（）＜＞",
  "": {
    "editor.tabSize": 4,
    "editor.insertSpaces": true
  },
  "[php]": {
    "editor.defaultFormatter": "junstyle.php-cs-fixer"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "php-cs-fixer.lastDownload": 1674173416324,
  "window.zoomLevel": -1,
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.donotVerifyTags": true,

  "launch": {
    "version": "0.2.0",
    "configurations": [{
      "name": "Listen for Xdebug",
      "type": "php",
      "request": "launch",
      "port": 9003
    }]
  },
  "liveServer.settings.useWebExt": true,
  "liveServer.settings.useLocalIp": true,
  "php.validate.executablePath": "/opt/homebrew/Cellar/php@8.1/8.1.14_1/bin/php",
  "phpserver.phpPath": "/opt/homebrew/opt/php@8.1/bin/php",
}
// WordPress関数がPHPエラー判定されないように
intelephense.stubs：最終行にwordpressを追加する

// PHPファイル保存時に自動整形
php.debug.executablePath：which　phpで確認したPHPのパスを設定する
php.cs-fixer.onsave: 保存時自動整形をtrueでONに
php-cs-fixer.executablePath：php-cs-fixer.pharファイルへのパス

// 最終行に空行追加
files.insertFinalNewline

// 余分な空行の除去
files.trimFinalNewlines

// 余分なスペース除去
files.trimTrailingWhitespac

// 文字列の折り返し
editor.wordWrap

// 保存時自動整形
editor.formatOnSave
// 編集時自動整形
editor.formatOnType
// ペースト時自動整形
editor.formatOnPaste

// ペースト時にリッチテキスト除去
editor.copyWithSyntaxHighlighting

// スペース表示（allで常時表示される）
editor.renderWhitespace

// 折りたたみボタン表示（alwaysで常時表示される）
editor.showFoldingControls

// 区切り文字に日本語（。、＜＞など）を追加（矢印で移動しやすくなる）
editor.wordSeparators

// インデント設定
    "": {
        "editor.tabSize": 4,
        "editor.insertSpaces": true
    },

// PHP整形
    "[php]": {
        "editor.defaultFormatter": "junstyle.php-cs-fixer"
    },
VSCode