vscode 설정 eslint 와 prettier 올 바른 방법
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
}
prettierprettier 는 코드 포맷 플러그 인 입 니 다.그것 은 문법 이 정확 한 지 에 관심 이 없고 코드 형식 에 만 관심 이 있 습 니 다.예 를 들 어 작은 따옴표 를 사용 하 는 지,문장의 끝 에 분 호 를 사용 하 는 지 등 입 니 다.
prettier
더 자세 한 규칙 에 대해 서 는여기,이곳을 클릭 하여 볼 수 있 습 니 다.자동 포맷 저장
prettier
에 파일 을 저장 한 후 자동 으로 포맷 하려 면 설정 에서 다음 과 같은 설정 을 할 수 있 습 니 다.또는
vscode
에 다음 내용 을 추가 해도 포맷 을 저장 할 수 있 습 니 다.vscode 설정 eslint 와 prettier 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vscode 설정 eslint 와 prettier 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
React Typescript 스니펫새로운 구성 요소를 생성할 때 동일한 코드를 입력하는 데 지쳤다면 VS Code가 제공하는 멋진 솔루션인 코드 스니펫 🔥이 있습니다. 다음은 Typescript로 React 구성 요소를 만들기 위한 두 가지 스니펫입...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.