Intellij에서 vue를 사용할 때 설정 방법을 항상 잊어 버리므로 비망록으로 남겨 둡니다.

ESLint

vue create 앱에서

? 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를 설정하고 있다. 나왔지만 이것을 제외로 설정했다.

【注意】
"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를 시작할 수 있습니다.

결론

왠지 좋은 설정 있으면 수시로 갱신해 간다!