IntelliJ의 Nuxt.js 프로젝트에서 Prettier와 ESLint를 도입하여 코드를 자동 성형합니다.

아마 현재의 IntelliJ의 Prettier 플러그인에서는 .eslintrc.js 의 Rules가 반영되지 않는 것과 Ctrl + s 설정했습니다.

node 모듈 넣기

// vue-cliでNuxt.jsプロジェクトが入ってる前提です。
// 追加で以下をdevDependenciesにインストール
$ yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

.eslintrc.js 설정

#ESLint 및 Prettier -Nuxt.js

위의 Nuxt.js 공식 문서대로 .eslintrc.js 단지 상기와 같으면 더블 쿼테이션을 사용하는 설정이 되어 있기 때문에 singleQuote: true 를 추가했습니다.

.eslintrc.js

module.exports = {
  // ~~~~~~~~~~~~~~~~
  rules: {
    'semi': [2, 'never'],
    'no-console': 'off',
    'vue/max-attributes-per-line': 'off',
    'prettier/prettier': ['error', { 'singleQuote': true, 'semi': false }]
  }
}

IntelliJ or WebStorm에 File Watchers 플러그인 추가

추가하십시오. 재부팅 후 설정 → 도구 → 파일 감시가 있으면 OK입니다.

File Watchers 설정

프로그램:\$ProjectFileDir\$/node_modules/.bin/eslint

인수: --fix\$FilePath\$ --ignore-path\$ProjectFileDir\$/.gitignore\$ProjectFileDir\$/.

새로 고치는 출력 경로 :\$FilePath\$

위와 같은 느낌으로 설정했습니다. --ignore-path 의 설정하지 않으면 node_modules 라든지 .nuxt 에도 일해 죽기 때문에 주의해 주세요.