JavaScript, Vue - 개발환경 구성

ESLint란?

JavaScript 코드에서 발견 된 문제 패턴을 식별하기위한 정적 코드 분석 도구

쉽게 얘기해서 에러에 대한 가능성을 제거하기 위한 문법 교정 도구

ESLint를 사용하면 다음과 같이 문법적 오류가 발생했을 때 화면에 오류 문구가 뜨면서 화면 컨트롤을 아예 차단시킨다.
!! config 파일을 추가하여 오류 문구가 안뜨게 설정해야 함 !!

vue.config.js 파일

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

• ESLint 에러가 화면에 표시되지 않게 하는 방법

• 터미널에는 오류가 뜨지만 화면에 위와 같은 오류 문구가 안뜨게 해주는 파일

---

Prettier란?

개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 변환해주는 도구인 code formatter의 한 종류

Prettier를 사용하는 이유

통일된 코딩 스타일을 적용하기 위해서
: 같은 프로젝트를 하는 개발자들은 정해진 공통된 스타일 가이드를 통해 일관적인 코딩스타일을 유지할 수 있다.

다양한 옵션들

prettier 공식 사이트_옵션

{
  "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
  "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부
  "printWidth": 80, //  줄 바꿈 할 폭 길이
  "semi": true, // 세미콜론 사용 여부
  "singleQuote": true, // single 쿼테이션 사용 여부
  "tabWidth": 2, // 탭 너비 
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "useTabs": false, // 탭 사용 여부
}

---

ESLint와 Prettier 같이 사용하기

ESLint에 적용한 rules와 충돌이 나기 때문에 rules 안에 prettier를 적용하여 같이 사용하여야 한다.

.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",
    "prettier/prettier" : ['error', {
      printWidth: 80,
      semi: true,
      useTabs: true,
      tabWidth: 2,
      singleQuote: true,
      arrowParens: 'avoid',
      trailingComma: 'all',
      brackeSpacing: true,
    }]
  },
};

• ESLint를 설정하는 파일의 rules에 ESLint와 prettier을 같이 설정한다.

• "prettier/prettier" 안에 해당 prettier 옵션들을 넣어주면 된다.