경고 : 프로젝트 생성한 상태에서 적용하게 되면 기존 소스들이 다 빨갛게 변하는 현상을 볼 수 있음 :)

프로젝트에 적용하기

VS Code에 Plugin 먼저 설치

• ESLint 검색하여 설치, 해당 이미지와 동일한 것 설치하기
  
• 플러그인을 설치하면 다음과 같이 오른쪽 하단에 ESLint 표시
• V가 되어있으면 현재 해당 소스에는 적용이 되어있다는 말
  

package.json

• 해당 파일에 아래 내용이 설치 되어있는지 확인,
• 설치가 되어있지 않는 경우 설치하면 된다 😀

"devDependencies": {
  "@vue/eslint-config-prettier": "^6.0.0",
  "eslint-plugin-prettier": "^3.3.1",
  "prettier": "^2.2.1",
}

.eslintrc.js

• 해당 파일이 없으면, root 폴더에 생성하면 된다. (최상위!)
• 나의 코드에 맞춰 알맞게 수정한 상태, 옵션은 아래 사이트 가서 확인해보기

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "prettier/prettier": ['warn', {
      // https://prettier.io/docs/en/options.html
      singleQuote: true,
      semi: true,
      useTabs: true,
      tabWidth: 2,
      trailingComma: 'all',
      printWidth: 200,
      bracketSpacing: true,
      arrowParens: 'avoid',
			endOfLine: 'auto',
    }],
    "vue/html-closing-bracket-newline": ["warn", {
      "singleline": "never",
      "multiline": "always"
    }]
  },
  overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)",
      ],
      env: {
        jest: true,
      },
    },
  ],
};

.prettierrc

• 삭제한다.
• prettier + eslint 둘다 셋팅해 놓으면 설정이 이곳저곳에 있을 수 있으니 파일은 하나만 가지고 진행

VSCode Settings [Ctrl+,]

• setting.json 검색
  
• setting.json 안에 넣기

{
    "editor.tabSize": 2,
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.workingDirectories": [
        {
            "mode": "auto"
        } // 또는 "./{PATH_TO_CLIENT}"
    ],
    "eslint.alwaysShowStatus": true,
    "eslint.validate": [
        "vue",
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ],
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    "workbench.tree.indent": 20,
}

적용 예시

• 적용 전
  

• 적용 후