Nuxt Typescript EsLint & Prettier 설정

 

기본적인 EsLint npm 디펜던시를 추가한다.

* javascript 사용시 babel-eslint 를 추가 install

npm install --save-dev eslint eslint-config-prettier eslint-loader 
eslint-plugin-vue eslint-plugin-prettier prettier

 

Typescript EsLint npm 디펜던시를 추가한다.

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

 

프로젝트 루트파일에 .eslintrc.js 혹은 .eslintrc.json 파일을 작성한다 ( 필자는 .js 로 작성함 )

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
   // javascript 사용시 'babel-eslint' 사용
    parser: '@typescript-eslint/parser',
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended',
    'plugin:prettier/recommended',
  ],
  plugins: ['prettier', '@typescript-eslint'],
  rules: {
    'no-console': 'off',
    'vue/max-attributes-per-line': 'off',
    'vue/multi-word-component-names': 'off',
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: false,
        useTaps: true,
        tabWidth: 2,
        trailingComma: 'all',
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
        endOfLine: 'auto',
      },
    ],
  },
}

Prettier 사용자 설정 참고

Prettier · Opinionated Code Formatter

 

package.json 에 lint 와 lintfix  / "scripts" 에 추가

    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."