nuxt 프로젝트에 ESLint 도입

5652 단어 nuxt.jsESLint

전제


  • 동작 확인 환경
  • Windows10, VSCode
  • Node v8.11.3

  • 참고
  • Nuxt 공식 가이드 > 개발 도구 > ESLint

  • [Qiita] Nuxt.js + TypeScript + Sass + ESLint 시작하기


  • Install and Set up



    install Package


    yarn add -D babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier
    

    .eslintrc.js 만들기



    프로젝트의 루트에 추가

    .eslintrc.js
    module.exports = {
      root: true,
      env: {
        browser: true,
        node: true,
        mocha:true,
      },
      parserOptions: {
        parser: 'babel-eslint'
      },
      extends: [
        "eslint:recommended",
        // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
        // より厳しいルールにするには`plugin:vue/strongly-recommended` もしくは `plugin:vue/recommended` に切り替えることを検討してください。
        "plugin:vue/recommended",
        "plugin:prettier/recommended"
      ],
      // *.vue ファイルを lint にかけるために必要
      plugins: [
        'vue'
      ],
      // ここにカスタムルールを追加します。
      rules: {
        "semi": [2, "never"],
        "no-console": "off",
        "vue/max-attributes-per-line": "off",
        "prettier/prettier": ["error", { "semi": false }]
      }
    }
    

    package.json에 명령 추가



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

    lint, lintfix 실행 테스트



    >yarn run lint


    1501 problems가 발견된 것 같습니다.

    >yarn run lintfix


    소스가 많이 수정되어 83 problems만 남았습니다

    체크를 비활성화하는 방법



    한 줄만 비활성화
     // eslint-disable-line
    

    여러 줄 무효
     /* eslint-disable */
    
     /* eslint-enable */
    

    좋은 웹페이지 즐겨찾기