26. 인텔리제이 (IntelliJ IDEA) - prettier 사용하기 Vue JS

OS	Windows 10 PRO 64bit 버전 20H2 (OS 빌드 19042.867)
IntelliJ IDEA	2020.1.3

사용 GIF

이미지 클릭

저장 버튼 또는 다른 창 갔다오면 자동으로 정해진 규칙에 따라 코드를 정리한다

 

ESLint 설치 생략

 

Prettier 플러그인 설치

플러그인 설치

 

Prettier 플러그인 설정

해당 패키지의 npm 모듈 선택

 

[방법 1] 현재 패키지 설정

package.json

{
  "name": "vue-til",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.4.4",
    "vue": "^2.6.10",
    "vue-router": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-unit-jest": "^4.1.0",
    "@vue/cli-service": "^4.5.12",
    "@vue/eslint-config-prettier": "^5.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^5.0.0",
    "prettier": "^1.19.1",
    "vue-template-compiler": "^2.6.10"
  },
  "prettier": {
    "singleQuote": true,
    "semi": true,
    "useTabs": false,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 80,
    "bracketSpacing": true,
    "arrowParens": "avoid"
  }
}

 

eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
    jest: true,
  },
  extends: ['plugin:vue/essential', '@vue/prettier'],
  rules: {
    'no-console': 'off',
    // "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    // "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: true,
        useTabs: false,
        tabWidth: 2,
        trailingComma: 'all',
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
      },
    ],
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)',
      ],
      env: {
        jest: true,
      },
    },
  ],
};

 

vue.config.js

module.exports = {
	devServer: {
		overlay: false,
	},
};

es lint 검사 오류 시 오버레이로 덮기 해제

 

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./src/*"
      ],
    }
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

'@' 를 src path 설정하는 config.js

 

기본적으로 자동완성을 제공한다

 

[방법 2] 같은 패키지에 .prettierrc 놓기

.prettierrc

0.00MB

 

참고

React.js Project 개발 환경 설정하기 3편 : ESLint & Prettier 설정으로 Linting on Save 설정하기