Nuxt 프로젝트에 eslint 설정했다!

지금 나는 스타트업에 다니고 있다!
그래서 처음부터 차근차근 개발문화를 만들어나가고 있는데, 먼저 그동안 없었던 코딩 컨벤션부터 작성해봤다.

사이드 프로젝트에서 eslint설정을 그대로 가져올려고 했는데 사이드 프로젝트는 Next.js를 쓰고있어서 설정이 안맞는 부분이 많았다.
그래서 열심히 구글링을 하며 세팅을 진행했다.

nuxt에 eslint와 prettier 모듈 다운로드

nuxt 자체에서 eslint를 제공하는 @nuxt/eslint 도 있는것같았는데 그걸 사용하진 않고 그냥 eslint로 세팅했다.

npm i -D eslint eslint-config-airbnb-base eslint-config-prettier eslint-plugin-import eslint-plugin-nuxt eslint-plugin-prettier eslint-plugin-vue prettier prettier-plugin-tailwindcss

package.json

  "devDependencies": {
    "eslint": "^8.57.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-nuxt": "^4.0.0",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-vue": "^9.25.0",
    "prettier": "^3.2.5",
    "prettier-plugin-tailwindcss": "^0.5.13",
  },

이렇게 다 설치한다음, root 경로에 .eslintrc.cjs .prettierrc .prettierignore 파일을 만들었다.

cjs, mjs 확장자의 차이가 뭔지 궁금해서 검색해봤당

• CommonJS = CJS = module.exports로 모듈 내보내고, require로 임포트 = 확장자 cjs
• ES Modules = ESM = import, export사용 = 확장자 mjs

.eslintrc.cjs 파일 세팅

💪 airbnb 로 따르기로 했다. 개발하면서 우리의 프로젝트에 맞게 세팅을 점점 추가했다!

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['vue'],
  extends: ['airbnb-base', 'eslint:recommended', 'plugin:nuxt/recommended', 'plugin:vue/recommended', 'plugin:prettier/recommended'],
  rules: {
    'import/extensions': 'off',
    'import/no-unresolved': 'off',
    'import/no-extraneous-dependencies': 'warn',
    'import/prefer-default-export': 'off',
    'vue/multi-word-component-names': 'off',
    'no-shadow': 0,
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debug': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-unused-vars': 'warn',
    'no-debugger': 'error',
    'no-use-before-define': 'error',
    'no-undef': 'off',
    'no-restricted-globals': ['off'],
    'consistent-return': 'off',
    'no-plusplus': 'off',
    curly: 'error',
    eqeqeq: 'error',
    'prettier/prettier': [
      'error',
      {
        arrowSpacing: ['error', { before: true, after: true }],
        singleQuote: true,
        semi: false,
        useTabs: false,
        tabWidth: 2,
        trailingComma: 'none',
        printWidth: 200,
        bracketSpacing: true,
        arrowParens: 'always',
        endOfLine: 'auto'
      }
    ],
    'global-require': 0
  }
}

.prettierrc 파일 세팅

지금 tailwindcss를 사용하고있어서 클래스 중요도에 맞게 배치를 해주는 prettier-plugin-tailwindcss를 설치했당 (강추!!👏)

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "arrowSpacing": ["error", { "before": true, "after": true }],
  "singleQuote": true,
  "semi": false,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "printWidth": 200,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "auto"
}

.prettierignore 파일 세팅

프리티어를 적용안할 파일을 세팅했다!

package.json
package-lock.json
*.md

이렇게 토이프로젝트 말고 실무에서 eslint를 세팅해본적이 처음이라 값진 경험이었던것 같다!

husky라는 eslint를 git commit시 검사하고 eslint error시 커밋을 막는 툴도 있는데,
나중에는 husky도 도입해보고 싶다.