ESLint + Prettier 연동 및 설정이 잘 안먹힐때, 파일의 절대경로 설정(jsconfig.json)

vue-cli (개발도구) 설치하시고

$ npm install -g @vue-cli

$ vue-create 프로젝트 이름

프로젝트 설치 옵션

• Manually select features
• Babel, Linter, Unit(space로 선택)
• Prettier
• Lint on Save
• Jest
• In dedicated config files
• n

ESLint 에러를 화면에 표시하지 않게 하는 방법

(이러한 화면이 떠서 생산성이 낮아지는걸 막아보자)

vue.config.js -> vue 설정파일을 만들고

module.exports = { devServer: { overlay: false } }

 

ESLint

JavaScript 코드에서 발견 된 문제 패턴을 식별하기위한 정적 코드 분석 도구입니다.

즉, JavaScript 코드에서 에러가 날수 있는것들에 대한 가능성을 제거하기 위한 도구

 

그리고 물론 커스텀도 가능

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {
    "no-console" : "off" // console.log() 가능 빨간줄없어짐
    // "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    // "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
  }
};

 

Prettier

코드 정리 도구!

indent, 세미클론 자동 찍기, 등등

 

한가지 주의할 점은 ESLint와 Prettier는 충돌이 날 수 있기때문에 ESLint안에 Prettier를 셋팅해야한다.

우선시 되는게 ESLint이기 때문이다.

"prettier/prettier" 부분 삽입

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

저렇게 셋팅하고 나면 자동수정할래요? 같은 문구가 뜨는걸 확인할 수 있다.

(제대로 안뜨면 ESLint에 문제가 있는것 확장프로그램이 안깔려있다거나 validation 설정도 확인)

 

Ctrl + , => 설정 들어가기

 

ESLint validate 설정방법

저기 Edit int settings.json 에 들어가서

{
  // 기존의 어떤 설정들~

  // ESLint
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
  "eslint.workingDirectories": [ // 보통 이렇게 디렉토리 설정을 안해서 자동고침이 안된다
    {"mode": "auto"}
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // don't format on save
  "editor.formatOnSave": false
}

이 코드를 추가 해준다~

 

https://joshua1988.github.io/web-development/vuejs/boost-productivity/#prettier-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

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

ESLint 가 제대로 안될 때는 뭔가

Formatting 하는 다른 프로그램이 깔려있다거나

FormatOnSave 체크 해제확인( eslint로 foramt on save를 해야하기 때문에)

 

Reset Library 로 eslint 설정파일 읽게하기

 

이렇게 하면 팀으로 일할 때도 같은 포맷으로 코드가 초기화되서 생산성 향상

 

eslint가 잘 안먹히면 vscode 밑쪽에 eslint 관련으로 에러가 떠있을건데, 지금은 잘되기때문에 없다.

파일을 절대 경로로 찾기 설정

 

위 처럼 파일 경로가 복잡하게 설정 되어 있을때,

VSCode에서 제공하는 파일을 이용해서 절대경로 설정하는 방법이 있다.

jsconfig.js

https://code.visualstudio.com/docs/languages/jsconfig

jsconfig.json Reference

설정 코드를 보면

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./src/*"
      ],
    }
  },
  "exclude": [ // 제외할 파일
    "node_modules",
    "dist"
  ]

이렇게 설정해두면

저렇게 사용할 수 있게 된다!