Visual Studio Code でいろんな言語を自動フォーマットする

このブログでも何度か書いてきましたが、私は普段コードを書く際は Visual Studio Code(以下 VSCode) を利用しています。
豊富なプラグインがあるので基本的にどの言語もこれ1つでまかなえるため、他のエディタや IDE はちょっと考えられないような状況です。

また、このあたりでも書いた通り、最近はコードを書く際に一定のルールに沿って書くことが増えてきました。
今回は私と同じように VSCode を愛してやまない方のため、私が普段利用しているいくつかの言語の「チェック、フォーマットする設定」について書きます。

PHP

利用するツール概要VSCode のプラグイン
PHP_CodeSniffer (phpcs)チェックツールphpcs
PHP Code Beautifier and Fixer (phpcbf)自動フォーマットツールphpcbf

VSCode の設定 (settings.json)

{
  "editor.formatOnSave": true,
  "phpcs.enable": true,
  "phpcs.executablePath": "{phpcs ファイルのパス(プロジェクト単位で composer 管理している場合は vendor/bin/phpcs など)}",
  "phpcs.standard": "{利用するルールセット(CakePHP なら vendor/cakephp/cakephp-codesniffer/CakePHP など)}",
  "phpcbf.enable": true,
  "phpcbf.executablePath": "{phpcbf ファイルのパス(プロジェクト単位で composer 管理している場合は vendor/bin/phpcbf など)}",
  "phpcbf.standard": "{利用するルールセット(CakePHP なら vendor/cakephp/cakephp-codesniffer/CakePHP など)}",
  "phpcbf.onsave": true,
  "[php]": {
    "editor.defaultFormatter": "persoderlind.vscode-phpcbf"
  }
}

Python

利用するツール概要VSCode のプラグイン
pycodestyleチェックツールpython
autopep8自動フォーマットツールpython

VSCode の設定 (settings.json)

pycodestyle の代わりに flake を使うこともできます。
その場合は python.linting.pycodestyle~ ではなく python.linting.flake8~ で設定します。

{
  "editor.formatOnSave": true,
  "python.venvPath": "{venv を利用している場合はそのディレクトリ}",
  "python.linting.enabled": false,
  "python.linting.pycodestyleEnabled": true,
  "python.linting.pycodestylePath": "{pycodestyle へのパス}",
  "python.formatting.autopep8Path": "{autopep8 へのパス}"
}

JavaScript, TypeScript

利用するツール概要VSCode のプラグイン
eslintチェックツールeslint
autopep8自動フォーマットツールprettier

VSCode の設定 (settings.json)

{
  "eslint.autoFixOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.tslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "vue-html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ],
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Vue

Vue の場合、専用のプラグインである Vetur があり、そちらのサポートが強力なのでそれを使います。

VSCode の設定 (settings.json)

prettier も vetur 側で処理するので、前述した prettier プラグインは利用しないようにしています。
prettyhtml の設定内容は一例です。

{
  "prettier.disableLanguages": ["vue", "js"],
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatter.ts": "prettier-tslint",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-expand-multiline"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": true,
      "sortAttributes": false
    }
  }
}

Go

Go はコンパイルされるのでその際にエラーは検知できます。
標準のフォーマットツール (gofmt) もあるので、プラグインは Go さえ導入すればあとは自動でインストールできます。

VSCode の設定 (settings.json)

{
  "go.gopath": "{GOPATH の値}"
  "go.formatTool": "{gofmt やその上位互換である goimports, goreturns など}"
}

まとめ

ひとまず私が普段使う言語から設定を記載しました(Ruby はあまり使うことがないので割愛しています)。
もっと便利な設定があるなどあれば教えていただけると嬉しいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA