[Nuxt Admin] 3. Nuxt에서 ESLint와 Prettier설정

[ Nuxt Admin Template 3 ] Nuxt에서 개발 툴 ESLint 와 Prettier 설정

5. ESLint이란?

ESLint이란?

ESLint이란? 프로젝트 개발 시 if문이나 for에서 중괄호 함수 뒤 공백여부 등을 회사마다 코딩 스타일 규칙이 있는 것처럼 설정하는 유틸리티이다.

코드 Linting 이란 특정 스타일 규칙을 준수하지 않는 문제가 있는 소스코드를 찾는데 사용되는 방식을 말하며, Linter 는 이러한 Linting 을 수행하는 도구이다.

자바처럼 컴파일러 방식 언어는 컴파일시 수행되는 Linter 가 내장되어 컴파일에러를 발생하지만, 자바스립트처럼 인터프리터 방식은 Linter 가 존재하지 않는다.

그래서 ESLint로 설정하면 자바스크립트로 개발시 구문에러나 경고를 보여줘서 규칙에 맞게 코딩할 수 있게끔 유도한다.

ESLint를 설정하는 방법

JavaScript 개발시 사용되는 IDE/Editor(개발툴)에 지원되는 ESLint 플러그인을 설치해서 설정하는 방법
webpack 을 사용하여 webpack 번들링시 eslint-loader 로 사전에 등록된 규칙으로 설정하는 방법

**개발툴에 플러그인을 설정하여 진행하는 경우 팀원간의 서로 동일하게 ESLint을 설정해야한다.

NPM ESLint 설명

ESLint는 ECMAScript / JavaScript 코드에있는 패턴을 식별하고 보고하기 위한 도구입니다.

npm ESLint

6. Prettier이란?

Prettier이란?

ESLinst로 코딩스타일을 설정하면 규칙에 맞지 않는 코딩 스타일을 하면 경고나 에러를 띄움으로써 우리가 제대로 된 코드를 작성 할 수 있게끔 유도를 한다. Prettier는 여기서 ESLinst에서 설정한 규칙으로 코드를 자동으로 정렬해주는 역할을 한다.

NPM Prettier

Prettier는 코드를 예쁘게 정리해주는 코드 포맷터입니다.

npm Prettier

7. Nuxt에서 개발 툴 ESLint 와 Prettier 설정

ESLint는 깔끔한 코드를 유지할 수 있도록 해주는 멋진 툴입니다. Prettier는 매우 유명한 코드 포매터 입니다.

Nuxt뿐만 아니라 Vue, React, Anguler 등에서 개발에 맞게 확장 된 패키지들을 있다.

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

package.json

그리고, package.json에 lint와 lintfix 스크립트를 추가해서
npm run lint 또는 npm run lintfix를 실행하여 자동으로 lint할 수 있다.

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

.eslintrc.js

.eslintrc.js 파일을 프로젝트의 루트 디렉토리에 두고 ESLint를 설정(커스텀마이징)합니다.
(자세한 설정에 대한 내용은 구글링을 참고 또는 ESLint에서 확인)

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 2017,
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    mocha: true
  },
  // activate vue related rules
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended',
  ],
  // required to lint *.vue files
  plugins: [
    'html',
    'standard',
    'vue'
  ],
  // add your custom rules here
  rules: {
    'generator-star-spacing': 'off',
    'indent': ['error', 2],
    'semi': ["error", "never", { "beforeStatementContinuationChars": "always"}],
    'quotes': ['off', 'single'],
    'no-console': 'off',
    'comma-dangle': ['error', {
      'arrays': 'never',
      'objects': 'never',
      'imports': 'never',
      'exports': 'never',
      'functions': 'never'
    }],
    'no-multiple-empty-lines': ['error', { 'max': 2, 'maxBOF': 1 }],
    'space-in-parens': ['error', 'never'],
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'space-before-blocks': [
      'error',
      'always'
    ],
    'no-empty': 'error',
    'no-duplicate-imports': 'error'
  },
  globals: {}
}

여기까지 진행하면 간단한 개발정도는 문제 없을 것 같다. 진행하면서 필요에 따라 추가 및 수정하면 된다.

참고

5. ESLint이란?

6. Prettier이란?

7. Nuxt에서 개발 툴 ESLint 와 Prettier 설정

Share this post