Visual Studio Code で Vue の開発環境を整える

全国65,535人くらいの凄腕ハッカーフレンズの皆さんこんにちは！

たーのしー！

概要

Visual Studio Code での Vue の開発環境を整える。今回は特にQuasar Frameworkにおいて、lintやコード補完が動くことを目標とする。

• ファイル保存時に自動でコードフォーマット＆lintのfix
• よく使うものはコード補完

必要なもの

vscode上のextension

• HTML Snippets …HTML5のコード補完
• ESLint … jsのlint
• language-stylus … stylusのvscodeサポート
• vetur … vueのvscodeサポート
• VueHelper … vueのコード補完

  stylintについて

  正直いい感じのプラグインはないが、必要な人は下記を使用

• doiuse

vscodeの設定

settings.jsの設定を抜粋

  /*
   Html, JavaScript, Vue
  */
  "files.associations": {
    "*.vue": "vue"
  },
  // vueにcssのemmet追加
  "emmet.syntaxProfiles": {
    "vue": "css"
  },
  // vueだけで追加したい設定
  "[vue]": {
    "editor.formatOnSave": true
  },
  "eslint.enable": true,
  // 適応するファイルタイプを決定
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // プロジェクト配下のeslintrc.jsを読み込み
  "eslint.options": {
    "configFile": ".eslintrc.js"
  },
  // 保存時に自動フォーマット
  "eslint.autoFixOnSave": true,

補足情報

files.associationsいらないと思うが、この設定がないとvue内のstyleタグが崩壊する。 また、files.associationsで設定しない場合は、eslint.validateでのlanguage指定をhtmlにする必要がある。 VueHelperの補完が起動後すぐ働かない場合があるが、その場合は空のTypeScriptファイル(.ts)を作成してコード補完してみることで動作確認ができる。

.eslintrc.jsの設定

module.exports = {
  root: true,
  parser: 'vue-eslint-parser',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true
  },
  globals: {
    'cordova': true,
    'Velocity': true,
    'DEV': true,
    'PROD': true,
    '__THEME': true
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    'one-var': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'brace-style': [2, 'stroustrup', { 'allowSingleLine': true }]
  }
}

補足情報

parserにvue-eslint-parserを指定すること。pluginsの項目にhtmlが存在する場合は削除すること！

まとめ

• vscodeならvetur使おう
• vueにeslintが直接使えないことはeslintの制限なので、パーサにvue-eslint-parser指定しよう
• Quasar Frameworkまじで凄いので、とりあえずドキュメント読んで！