Intellijでvueを扱う時の初期設定

Intellijでvueを使う時、設定方法をいつも忘れるので、備忘録として残しておく。

ESLint

vue create appで

? Pick a linter / formatter config: 
  ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
❯ ESLint + Prettier 
  TSLint (deprecated) 
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

これで保存時にLintが効くようになる。(誤った構文を記載するとwarningで教えてくれる

Prettierの設定

npm add --dev prettier eslint-config-prettier eslint-plugin-prettier

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/typescript',
    'plugin:prettier/recommended'
  ],
  rules: {
    'prettier/prettier': ['error', { singleQuote: true, semi: false }],
    'vue/mustache-interpolation-spacing': ['error', 'always' | 'never'], // マスタッシュ構文は空白をいれる
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  overrides: [
    {
      files: ['**/__tests__/*.{j,t}s?(x)'],
      env: {
        mocha: true
      }
    }
  ]
}

File Watchersを以下のように設定

Program: $ProjectFileDir$/app/node_modules/.bin/eslint
Arguments: --fix $FilePathRelativeToProjectRoot$
Output paths to refrash: $FilePathRelativeToProjectRoot$
Wroking directory: $ProjectFileDir$

これで自動的に誤った構文を正してくれる（超便利！
(※intellijのcode style設定と競合する場合がある時は、適宜、warningを除外する設定を追加する。今回の設定ではセミコロンはつけないというESlintを設定している。「Unterminated statement」でwarningが出たが、これを除外設定した。

【注意】
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^5.0.0",
"prettier": "^1.19.1",

ここらへんのバージョンにしないと、よくわからないエラーが出るようになった。
(分かり次第追記します。

実行設定

Run/Debug Configrationsでnpmを選択し、package.jsonにpathを、scriptにserveを設定することで実行が行えるようになる。

vuetifyの導入

vue add vuetify

typescriptの場合エラーが出るので以下で修正

tsconfig.json

...
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "mocha",
      "chai",
      "vuetify" #追加
    ],
    "paths": {
...

これでエラーなくvuetifyを起動できる

おわりに

なんか良い設定あったら随時更新していく！