vscode 설정 eslint 와 prettier 올 바른 방법

ESlint
ESLint 는 문법 검사 도구 다.자 바스 크 립 트 자체 가 유연 한 동적 언어 이기 때문에 천 개의 자 바스 크 립 터 에 천 가지 문법 이 있다.사람들의 이 해 를 편리 하 게 하기 위해 서 다른 사람의 코드 를 빠르게 손 에 넣다.
설명 하 다.
개발 프로젝트 를 할 때 코드 형식 을 검사 하고eslint코드 포맷 을 하 는 경우 가 많다.이 박문 은 주로 사용prettier개발vscode프로젝트 를 기록 할 때의vue과eslint의 배치 이다.
vscode 설치 플러그 인
우선prettier에vscode와eslint플러그 인 을 설치 해 야 한다.


프로젝트 의 프로필
vue 프로젝트 에서prettier파일 은 주로.eslintrc.js의 관련 설정 을 책임 집 니 다.

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

더 많은 eslint 규칙 에 대해 서 는여기,이곳을 클릭 하여 볼 수 있 습 니 다.eslint파일 담당.prettierrc.js의 규칙 설정:

module.exports = {
  tabWidth: 2,  // tab
  semi: false,  //       
  singleQuote: true,  //      
  bracketSpacing: true,  //          
  disableLanguages: ['vue'],  //     vue  
}

prettier
prettier 는 코드 포맷 플러그 인 입 니 다.그것 은 문법 이 정확 한 지 에 관심 이 없고 코드 형식 에 만 관심 이 있 습 니 다.예 를 들 어 작은 따옴표 를 사용 하 는 지,문장의 끝 에 분 호 를 사용 하 는 지 등 입 니 다.prettier더 자세 한 규칙 에 대해 서 는여기,이곳을 클릭 하여 볼 수 있 습 니 다.
자동 포맷 저장prettier에 파일 을 저장 한 후 자동 으로 포맷 하려 면 설정 에서 다음 과 같은 설정 을 할 수 있 습 니 다.

또는vscode에 다음 내용 을 추가 해도 포맷 을 저장 할 수 있 습 니 다.

vscode 설정 eslint 와 prettier 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vscode 설정 eslint 와 prettier 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!