16. ESLint / Prettier 설정 (Quasar, Vue3)

코드 포맷팅 설정 ESList / Prettier

 

1단계 : VSCode 편집기 설정

• ctrl + , 단축키로 편집기 세팅화면 확인 가능
• Format On Save 체크 해제
• Default Formatter : ESLint 선택
• Tab Size : 2로 변경

format on save 체크되어 있으면 안된다

 

tab Size 2로 설정

---

2단계 : Package.json의 devDependencies에 라이브러리를 세팅한다

• 라이브러리 설치로 VSCode 편집기에서 Plugin으로 Prettier를 사용하는 것이 아닌 설정 파일로 Prettier를 사용할 수 있게 된다.
• 추후 팀원이 추가되더라도 동일한 포맷팅 유지가 가능해진다.

"devDependencies": {
    "@quasar/app-vite": "^1.3.0",
    "@types/node": "^12.20.21",
    "@typescript-eslint/eslint-plugin": "^5.10.0",
    "@typescript-eslint/parser": "^5.10.0",
    "eslint": "^8.51.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-n": "^15.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-vue": "^9.17.0"
  },

---

3단계 : Setting.json 파일 설정

{
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.formatOnSave": false, // 저장 시 해당 파일 전체 포맷 여부
  "editor.defaultFormatter": "dbaeumer.vscode-eslint", // 포맷의 형태를 어떤 방식으로 설정하는지에 대한 세팅
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
    "eslint.workingDirectories": [ // 코드 자동 고침 설정
      {"mode": "auto"}
  ],
  // "typescript.tsdk": "node_modules/typescript/lib"
}

---

4단계 : .eslintrc.cjs 파일의 plugins 설정에 'prettier' 추가

  plugins: [
    '@typescript-eslint',

    'vue',
    'prettier',
  ],

---

5단계 : .eslintrc.cjs 파일의 rules 설정

// add your custom rules here
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        useTabs: true,
        tabWidth: 2,
        trailingComma: 'all',
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
      },
    ],
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-unused-vars' : 'off' // 사용안하는 기능 경고 끄는설정
    semi: ['error', 'always'],
  },

---

6단계 : tsconfig.json 파일 설정

{
  "extends": "@quasar/app-vite/tsconfig-preset",
   "compilerOptions": {
    "baseUrl": ".",
    "forceConsistentCasingInFileNames": true
  },
  "paths":{
    "src/*": ["src/*"],
    "pages/*":["src/pages/*"],
    "assets/*":["src/assets/*"],
  },
  "exclude": [".quasar"],
  "jsx":"preserve",
}