VSCode設定 setting.json サンプル

プログラミング
この記事は約12分で読めます。
記事内に広告が含まれます。
スポンサーリンク

インストールプラグイン

  • Bookmarks
  • Bracket Pair Colorizer 2
  • Cordova Tools
  • ESLint
  • Git History
  • GitLens — Git supercharged
  • Japanese Language Pack for Visual Studio Code
  • Material Icon Theme
  • npm
  • Output Colorizer
  • PlantUML
  • Prettier – Code formatter
  • Todo+
  • Vetur
  • Debugger for Chrome
  • GitFlow 4 Code
  • VS Color Picker
  • Auto Rename Tag
  • Auto Close Tag
  • Node.js Modules Intellisense
  • Local History
  • DotENV
  • Visual Studio IntelliCode

PHP開発用

  • Php Debug
  • PHP IntelliSense

ESLintを使う

$ npm install -g eslint
$ npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y

.eslintrc.js ファイルを以下の内容に差し替える

module.exports = {
    "extends": "airbnb",
    "plugins": [
        "react",
        "jsx-a11y",
        "import"
    ],
    "globals": {
        "window": true,
        "location": true,
        "document": true,
        "SubmissionError": true,
        "google": true,
    },
    "rules": {
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
        "react/prefer-stateless-function": [0],
        "import/no-unresolved": [0],
        "import/extensions": [0],
        "max-len": [1, 300, 2],
        "import/prefer-default-export": [0],
        "arrow-body-style": [0],
        "react/jsx-no-bind": [0],
        "yoda": [0],
        "no-restricted-syntax": [0],
        "react/require-default-props": [0],
        "no-use-before-define": [0],
    }
};

PHPを使う場合

コードの整形用プラグインを売れる場合に

$ composer global require "squizlabs/php_codesniffer=*"

パスを追加

export PATH=$HOME~/.composer/vendor/bin:$PATH

phpDebug設定

"configurations": [
    {
      "name": "プロジェクト名 Debug",
      "type": "php",
      "request": "launch",
      "port": 9001,  //Valetでデバッグする場合に9000は他で仕様のため9001に変更する
      "ignore": [
        "**/vendor/**/*.php"
      ]
    }
  ]
{
    // ウィンドウ設定
    "window.zoomLevel": 0, // 拡大率
    "window.title": "${dirty}${activeEditorShort} / ${rootName}",

    // エディター設定
    "editor.fontFamily": "'Ricty Diminished','Fira Code'",
    "editor.fontSize": 16,
    "editor.tabSize": 2,
    "editor.lineHeight": 19,
    "editor.letterSpacing": 0,
    "editor.codeLens": false,
    "editor.renderLineHighlight": "all", // 選択中の行を強調する
    "editor.glyphMargin": true, // 行の左端に余白を作る
    "editor.roundedSelection": true, // 選択範囲の角を丸める
    "editor.quickSuggestions": {
        "comments": false, // コメント内では無効
        "strings": true, // 文字列内では有効
        "other": true //  その他の場所で有効
      }, // 補完候補の自動表示
    "editor.formatOnType": true, // コード整形
    "editor.formatOnPaste": true, // コード整形
    "editor.folding": true, // コードの折りたたみを許可
    "editor.lineNumbers": "on", // 行番号の表示
    "editor.minimap.enabled": true, // ミニマップの表示
    "editor.minimap.maxColumn": 100, // ミニマップの幅
    "editor.scrollBeyondLastLine": true, // 最終行よりも下へのスクロールを許可
    "editor.renderControlCharacters": true, // 制御文字の表示
    "editor.insertSpaces": true, // Tabキーで半角スペースを入力
    "editor.renderIndentGuides": true, // インデントのガイドラインを表示
    "editor.autoIndent": false, // オートインデント
    "editor.cursorStyle": "line", // カーソルの形状
    "editor.cursorBlinking": "smooth", // カーソルの表示形式
    "editor.cursorWidth": 2, // カーソル幅
    "editor.emptySelectionClipboard": true, // 選択範囲無しでのコピーを許可
    "editor.links": true, // リンクをクリック可能に
    "editor.copyWithSyntaxHighlighting": false, //書式設定なしでテキストをコピーする

    "editor.mouseWheelScrollSensitivity": 0.7, // マウスホイール回転の移動係数
    "editor.mouseWheelZoom": false, // Ctrl+マウスホイールによるズームを無効化
    "editor.suggestFontSize": 18, // サジェストの文字サイズ
    "editor.suggestLineHeight": 18, // サジェスト欄の行の高さ

    //ターミナル
    "terminal.integrated.fontFamily": "Ricty Diminished", // フォント
    "terminal.integrated.fontSize": 16, // フォントサイズ

    // ファイル設定
    // "files.autoGuessEncoding": true, // 文字コードを自動判別
    // "files.autoSave": "off", //ダーティファイルの作成を無効
    // "files.eol": "\n", // 改行コードをLF(Linux/OSX)にする
    // "files.insertFinalNewline": true, // ファイルの終端に空の行を追加

    // エクスプローラーから除外するファイルとフォルダ
    "files.exclude": {
      "**/.git": true,
      "**/.history": true,
      "**/.idea": true,
      "**/.DS_Store": true,
      "**/.vscode": true,
      "**/.expo": true,
      "**/.expo-shared": true,
      // "**.vs": true,
    },

    // ワークベンチ設定
    "workbench.editor.showTabs": true, // タブを表示
    "workbench.statusBar.visible": true,
    "workbench.iconTheme": "material-icon-theme",
    "workbench.editor.enablePreview": false, //ファイルを開く際に新しいTABで開く

    // Emmet
    "emmet.showAbbreviationSuggestions": true,
    "emmet.showExpandedAbbreviation": "always",
    "emmet.includeLanguages": {
      "vue-html": "html",
      "vue": "html"
    },
    "[markdown]": {
      "files.trimTrailingWhitespace": false
    },
    "git.autofetch": true,
    "vsicons.dontShowNewVersionMessage": true,
    "explorer.confirmDragAndDrop": false,

    // ESLint
    "eslint.enable": true,
    "eslint.autoFixOnSave": true,

    // その他 
    "prettier.eslintIntegration": true,
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
}

Vueの開発を行う場合はESLint+Prettierで保存陣自動で整形を行えるようにできる

.vscode/settings.json

{
    "editor.formatOnSave": false,
    "eslint.autoFixOnSave": true,

    // Vue.js 設定
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    // ESLintとPrettierを連携
    "prettier.eslintIntegration": true,
}

ついでに上記の設定ファイルもGITで共有できるように
.gutignore

.DS_Store
/.history
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
/test/unit/coverage/
/test/e2e/reports/
selenium-debug.log

# Editor directories and files
#.idea
#.vscode  //.vscodeを除外から削除
*.suo
*.ntvs*
*.njsproj
*.sln

コメント

タイトルとURLをコピーしました