Vueファイル の Auto Format

本記事の背景

• Udemy で Vue.js のコースを受講中
  • Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
  • 英語だけど個人的にはわかりやすい
• VSCode で ファイルを保存すると Auto Format できるようにしたい
• 他の Qiita の参考記事を見ても中々再現できない
• 自分なりにやってみる

本記事の目的

vue-cli と ESLint を使って、vue ファイルを Auto Format できる環境を作ること

環境

OS: Windows 10 Pro

前提

参考記事をもとにインストール
必須のものをpick up

事前インストール

• Visual Studio Code: 1.27.2
• node.js: v8.11.3
• Vue: 2.5.17
• vue-cli: v2.9.6

Visual Studio Code のプラグイン

• HTML Snippets
• IntelliSense for CSS class names in HTML
• Prettier - Code formatter
• ESLint
• Vue 2 Snippets

手順

vue-cli でプロジェクト作成

下記コマンドを実行すること
必要に応じて Yes/No を切り替えること
とりあえず、ESLint は Yes にしましょう
コマンドの処理終了後に sample フォルダが作られます

vue init webpack sample
? Project name sample
? Project description A Vue.js project
? Author hage <[e-mail]>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

# move project folder
cd sample

.eslintrc.js の編集

sample フォルダの直下に「.eslintrc.js」があります
下記をコピーして、Vue の設定を付け加えましょう
prettier のルールはここを見て書くとよい
※ trailingComma は好みが分かれそうですね

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    sourceType: "module",
    parser: "babel-eslint"
  },
  env: {
    browser: true
  },
  extends: ["prettier", "prettier/standard", "plugin:vue/recommended"],
  plugins: ["vue", "prettier"],
  rules: {
    "generator-star-spacing": "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "properties": "always",
    "ignoreDestructuring": false,
    "prettier/prettier": [
      "error",
      {
        trailingComma: "none",
        singleQuote: true,
        semi: false,
        printWidth: 120,
      }
    ]
  }
};

VSCode のワークスペースの設定

sample フォルダの直下に「.vscode」のフォルダを作成
作成したフォルダの中に、下記内容をコピーして「settings.json」を格納

{
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  "eslint.enable": true,
  "editor.formatOnSave": false,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "vue-html",
      "autoFix": true
    }
  ],
  "eslint.run": "onType",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.validation.style": true,
  "vetur.validation.template": true
}

eslint と prettier の連携

下記を実行すること

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

まとめ

上記手順を実行することで、Vue ファイルを保存したときに Auto Format されます
※うまくいかない場合はコメント下さい

参考

Visual Studio CodeでVue.jsアプリケーションの開発環境を構築する
Formatting Vue.js Code with ESLint & Prettier
Efficient Code Analyzing and Formatting (for Vue.js) with ESLint and Prettier