vue 에서 eslint 를 사용 하여 vscode 작업 에 맞 춥 니 다.

여러 사람 이 합작 하 든 개인 프로젝트 든 코드 규범 은 매우 중요 하 다.이렇게 하면 기본 문법 오 류 를 어느 정도 피 할 수 있 을 뿐만 아니 라 코드 의 가 독성 도 확보 할 수 있다.이것 은 일 을 잘 하려 면 반드시 그 기 구 를 이 롭 게 해 야 한다.개인 적 으로 eslint+vscode 를 추천 하여 vue 를 쓰 는 것 은 분명 날 아 다 니 는 느낌 이 든다.
저장 할 때마다 vscode 는 eslint 규칙 에 부합 되 지 않 는 부분 을 표시 하고 간단 한 자기 수정 도 할 수 있 습 니 다.설치 절 차 는 다음 과 같다.
우선 eslint 플러그 인 설치

ESLint 를 설치 하고 설정 한 후에 우 리 는 계속 VSCode 로 돌아 가 확장 설정 을 하고 파일>첫 번 째 옵션>설정 을 누 르 면 VSCode 설정 파일 을 열 고 다음 설정 을 추가 합 니 다.

"files.autoSave":"off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    { "language": "vue", "autoFix": true }
   ],
   "eslint.options": {
    "plugins": ["html"]
   }

이렇게 저장 할 때마다 루트 디 렉 터 리 아래.eslintrc.js 에서 설정 한 eslint 규칙 에 따라 간단 한 fix 를 검사 하고 만 들 수 있 습 니 다.
보충 지식:vscode 설정 eslint 배합 vue 비계 빠 른 실현 코드 품질 화 쓰기
우 리 는 회사 에서 비 계 를 사용 할 때 에 스 린 트 를 사용 하여 코드 의 품질 검 사 를 실현 할 수 있 습 니 다.그러나 정 작 코드 를 쓸 때'표준'을 항상 기억 해 야 합 니 다.
이 럴 때 우 리 는 게임 코드 를 써 서 저장 할 때마다 표준 에 맞 는 코드 로 자동 으로 정리 해 주 고 싶 을 것 이다.
맞아요.vscode 에 이런 기능 이 있어 요.
여전히 여느 때 와 마찬가지 로 절차 와 코드 를 직접 올 렸 습 니 다.
1.이러한 조건 구현(vue 비계 설치 시 eslint+prettier 선택)
vscode 에 세 개의 플러그 인 eslint 코드 품질 검사 플러그 인 prettier 규칙 을 설치 하면 vetur vue 코드 하 이 라 이 트 를 사용자 정의 할 수 있 습 니 다.

2.파일 에 들 어가 기=>첫 번 째 옵션=>설정=>사용자=>확장=>eslint>seeting.json 파일 에 아래 코드 를 추가 합 니 다.

"editor.codeActionsOnSave": {     
    "source.fixAll.eslint": true
  }
//               eslint    

3.방금 설 치 된 vue 비계 가 있 습 니 다.저 는@vue/cli 4.0 버 전 입 니 다.

.eslintrc.js 파일 을 열 고 rules 에 아래 를 추가 하면 사용자 정의 규칙 입 니 다.

rules: {
  'prettier/prettier': [
   'error',
   {
    semi: false,  //      false    true   
    singleQuote: true,  //     true    false   
    printWidth: 160   //                 160
   }
  ]
 }

4.테스트 를 실행 하 는 것 은 package.json 파일 에 있 는 것 입 니 다.

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"  //           eslintrc.js                 
 }

npm run lint 를 시작 하 겠 습 니 다.

저희 비계 의 입구 파일 인 main.js 가 모든 따옴표 가 작은 따옴표 로 바 뀌 었 는 지 끝 에 아직 따옴표 가 나 오지 않 았 습 니 다.
저희 가 코드 를 대충 수정 해서 저장 해도 에 스 린 트 표준 에 맞 는 코드 로 자동 으로 조정 해 주 실 거 예요.편 하 시 죠?빨리 해 보 세 요.
이상 의 이 편 은 vue 에서 eslint 를 사용 합 니 다.vscode 에 맞 는 조작 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.