94. ESLInt에 Prettier 규칙 적용 | Prettier 캡틴판교 블로그

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    parser: "@babel/eslint-parser",
  },
  rules: {
    "no-console": "off",
    // "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    // "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",

    /*
     이렇게 prettier를 설정해놓으면 width가 80이 아닐땐 error를 뿜게된다.
     그러면 사람들이 width를 80으로 맞추는 코드 통일 효과를 얻을수 있다. 
    */
    "prettier/prettier": ['error', {
      // 프리티어의 속성 정의 공간 ↓
      singleQuote: true, // 싱글 따옴표 쓰겠다.
      semi: true, // 세미콜론 붙이겠다.
      useTabs: true,
      tabWidth: 2,
      trailingComma: 'all',
      printWidth: 80,
      bracketSpacing: true,
      arrowParens: 'avoid',
    }]
  },
  overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)",
      ],
      env: {
        jest: true,
      },
    },
  ],
};

---

https://joshua1988.github.io/web-development/vuejs/boost-productivity/

Vue.js 개발 생산성을 높여주는 도구 3가지