[Vue.js] 2. 프로젝트 구조 설명 / Es Lint 에러 확인

rules: {
    // test code
    // "no-console": "error",
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "prettier/prettier": [
      'error',
      // 아래 규칙은 개인 선호에 따라 prettier문법을 적용
      // https://prettier.io/docs/en/options.html
      {
        singleQuote: true, // ''
        semi: true,
        useTabs: false,
        tabWidth: 2,
        trailingComma: 'all',
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
      },
    ]
  },

1.

서버실행 : npm run dev

vue.js 실행 : npm run serve

 

2. 프로젝트 구조

node_modules : package.json에 명시

public : vue-cli로 빌드

src : source folder

test : jest 문법으로 유닛 테스트

 

.browserslistrc, .eslintrs.js, babel.config.js, jest.config.js는 dedicate config를 선택했기 때문에 각각 설정할 수 있도록 파일이 만들어 진 것임.

 

2. ESLInt 설정파일

 

cf) ESlint 에러가 화면에 표시되는 경우

vue-cli 3.x 버젼에서 나타나는 현상으로 브라우저에 에러가 덮힘. (오버레이)

실제 에러가 어플리케이션 실행에 문제가 되지는 않기 때문임.

 

=> vue.config.js 파일을 만듬

module.export = {
  devServer: {
    overlay: false
  }
}

오버레이를 끄도록 설정 (웹팩 데브서버의 설정)

 

 1) ESLint 설정파일

 .eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
  },
  overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)"
      ],
      env: {
        jest: true
      }
    }
  ]
};

rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
  },

를

  rules: {
    //
    "no-console": "error",
    }

로 만들고, app.js에서

  created(){
    console.log("hi");
  }

를 해주면

 17:5   error    Unexpected console statement  no-console

라는 에러가 뜬다.

 

 2) Eslint와 prettier의 관계

 ESLint : 자바스크립트의 문제패턴을 식별하는 정적 코드 분석 도구. 문법 검사 도구

 prettier : 코드 정리를 위해 개행 등 정리

 prettier.io/docs/en/options.html

 

 esLint가 우선시 되기 떄문에, eslint에 prettier 설정이 들어가야한다.

rules: {
    // test code
    // "no-console": "error",
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "prettier/prettier": [
      'error',
      // 아래 규칙은 개인 선호에 따라 prettier문법을 적용
      // https://prettier.io/docs/en/options.html
      {
        singleQuote: true, // ''
        semi: true,
        useTabs: false,
        tabWidth: 2,
        trailingComma: 'all',
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
      },
    ]
  },

 

 소스 레벨에서 prettier의 설정이 되어있기 때문에, 코드 베이스에서 작업할 때 동일한 설정으로 정리할 수 있게 된다. (개발툴의 종류에 상관없음)