Vue.js (Vue 3) ESLint & Prettier 설정

ESLint

프로젝트에서 자바스크립트 코드 작성하는 방식을 일관성 있게 구현하도록 도와줌 

Prettier

일관된 텍스트 형식을 가질 수 있음 -> 스타일 교정

---

설정

패키지 설치

npm i -D eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier

 

.eslintrc.js 파일 생성

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
  },
  extends: [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    parser: "@babel/eslint-parser",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "prettier/prettier": [
      // prettier 룰 추가
      "error",
      {
        singleQuote: true,
        semi: true,
        useTabs: true,
        tabWidth: 2,
        trailingComma: "all",
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: "avoid",
        endOfLine: "auto",
      },
    ],
  },
};

 

.vscode에 settings.json 파일 생성

저장 시 자동 포맷팅 설정

{
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
}

---

참고

https://velog.io/@lovelyeonee/Prettier-with-Eslint