2020 최신 vscode 포맷 코드 에 대한 자세 한 튜 토리 얼

vscode 포맷 설정 에 관 한 연구 초 고 는 다음 과 같 습 니 다.
머리말
이전에 vscode 로 포맷 할 때 바 이 두 와 구 글 에서'vscode 포맷 코드'를 검색 한 다음 에 다른 사람 을 직접 복사 했다.세부 적 인 설정 은 줄곧 보지 못 했다.
하지만 최근 개발 프로젝트 에서 같은 그룹의 제출 코드 와 형식 이 일치 하지 않 는 것 을 발견 했다.그래서 이틀 동안 플러그 인의 공식 문 서 를 보고 연 구 를 했 습 니 다.
오늘 연구 결과 가 좀 나 왔 습 니 다.조금씩 설정 할 게 요.이 블 로 그 를 써 서 여러분 과 함께 참고 하 세 요.부족 한 점 은 여러분 의 보충 을 환영 합 니 다.잘못된 점 은 여러분 의 잘못 을 바로 잡 는 것 을 환영 합 니 다.
글 의 내용 은 두 가지 부분 을 포함한다.하 나 는 이론 이 고,다른 하 나 는 나의 settings.json 의 배치 이다.
이론.
참고 글:
VSCode 프로그램 원숭이 무지개 방귀 플러그 인 rainbow fart 체험 편
vscode 설정 vue+vetur+eslint+prettier 자동 포맷 기능
vscode 설정 vue+vetur+eslint+prettier 자동 포맷 기능
코드 포맷 목적:
코드 포맷 의 목적 은 첫째,코드 의 가 독성 을 높이 고 인 코딩 을 편리 하 게 하 며 팀 개발 을 편리 하 게 하기 위 한 것 이다.둘째,형식 으로 인 한 오 류 를 쉽게 찾 고 수정 하 는 것 이다.
팀 개발.인 코딩 습관 이 다 르 기 때 문 입 니 다.

들 여 쓰 기 는 2 입 니까?4 입 니까?

코드 끝 에 점 수 를 추가 할 지,작은 따옴표 로 할 지,아니면 작은 따옴표 로 할 지.

함수 와 뒤의 괄호 사이 에 빈 칸 을 추가 할 지 여부 입 니 다.

등등

코드 형식 을 통일 하여 모든 사람 이 더욱 순조롭게 개발 하도록 하 다.
첫 번 째 목적 을 달성 하기 위해 포맷 플러그 인 은 vetur,prettier 등 파일 을 포맷 하 는 플러그 인 이 있 습 니 다.
두 번 째 목적 을 달성 하기 위해 포맷 플러그 인 은 ESlint 등 파일 에 대한 코드 검 사 를 위 한 플러그 인 이 있 습 니 다.
코드 포맷 에 대한 주의사항:
플러그 인 역할
우선 포맷 플러그 인 은 각각 어떤 파일 을 포맷 하 는 데 중심 을 두 는 지 알 고 있 습 니 다.서로 다른 파일 은 서로 다른 형식 규범 이 있 기 때 문 입 니 다.

prettyhtml   HTML；
prettier   css/less/scss/postcss/ts；
stylus-supremacy   stylus；
vscode          js；
vetur   .vue  ；              
ESlint：   ESlint    .vue     。

코드 검사
그리고 포맷 된 코드 기호 인 ESlint 코드 를 검사 하도록 주의 하 십시오.
포맷 코드 의 가장 중요 한 것 은 두 가지 입 니 다.하 나 는 포맷 플러그 인 으로 대응 하 는 파일 을 포맷 하 는 것 입 니 다.다른 하 나 는 포맷 된 코드 가 코드 검사 도 구 를 통과 할 수 있 도록 하 는 것 이다.
예 를 들다.
Prettier 플러그 인 은 함수 이름 뒤에 괄호 를 붙 이 는 것 을 지원 하지 않 습 니 다.이 점 은 ESlint 와 충돌 했다.따라서 js 의 포맷 은 prettier 플러그 인 을 사용 하여 포맷 할 수 없 으 며,vscode 자체 의 js 포맷 기능 을 사용 하여 포맷 합 니 다.그렇지 않 으 면 에 스 린 트 가 잘못 보고 한 거 야.강박 증 이 야.
플러그 인 업데이트
마지막 으로 플러그 인 은 플러그 인 이 계속 업데이트 되 기 때문에 인터넷 에서 직접 copy 의 포맷 코드 는 여러 가지 호 환 되 지 않 습 니 다.
예 를 들 어 vscode 의 ESLint 플러그 인 은 특정한 버 전에 서"eslint.validate"이 설정 옵션 을 제 거 했 고 인터넷 에서 많은 튜 토리 얼 이 사용 되 었 습 니 다.
새 버 전의 ESLint 에 서 는*.vue파일 에 대한 검증 을 지원 하기 때문에 이 설정 을 더 이상 진행 할 필요 가 없습니다.저장 할 때 ESLint 오 류 를 자동 으로 복구 하 는 기능 만 추가 하면 됩 니 다.
코드 포맷 플러그 인의 공식 문서:
언어 소개
pug： 공식 문서 。pug 는 node.js 플랫폼 을 위 한 HTML 모듈 엔진 입 니 다.
less： 공식 문서 。less 는 CSS 예비 처리 언어 입 니 다.
scss： 공식 문서 。scss(sass)는 세계 에서 가장 성숙 하고 안정 적 이 며 강력 한 전문 적 인 CSS 예비 처리 언어 이다.
postcss： 공식 문서 。postcss 는 js 플러그 인 을 사용 하여 CSS 를 변환 하 는 도구 입 니 다.
stylus： 공식 문서 。stylus 는 node.js 플랫폼 의 CSS 예비 처리 프레임 워 크 입 니 다.
플러그 인 소개
vetur： 공식 문서 。코드 하 이 라이트,emmet 문법 지원,문법 오류 검사,코드 알림,포맷 vue.
vetur 는 prettier 를 통합 하여 vue 파일 의 서로 다른 블록 에 서로 다른 포맷 방안 을 사용 하도록 합 니 다.template 라벨 은 html 포맷 도구,script 태그 호출 JavaScript 포맷 도구,style 탭 은 style 포맷 도 구 를 사용 합 니 다.
ESlint： 공식 문서 。코드 검사.
prettyhtml： 공식 문서 。vue 나 순수한 HTML 템 플 릿 등 일반적인 포맷 도 구 를 제공 합 니 다.
pretties： 공식 문서 。코드 포맷 도 구 는 코드 를 분석 할 수 있 고 사용자 가 설정 한 규칙 으로 규범 화 된 코드 를 포맷 할 수 있 습 니 다.
stylus-supremacy： 공식 문서 。stylus 파일 을 포맷 하 는 node.js 모듈 입 니 다.
나의 settings.json 파일

{
 /*         ：
     ，                 ；
                    。
prettyhtml   HTML；prettier   css/less/scss/postcss/ts；
stylus-supremacy   stylus；
vscode          js；
vetur   .vue  ；
ESlint      。
*/

 /*          。
           ESlint    。
1. vetur         。   .vue  
2. ESlint       ESlint     。
3. prettier   css；         ，          。
4.        。
*/

 //     prettier        
 "editor.defaultFormatter": "esbenp.prettier-vscode",

 "vetur.format.defaultFormatter.html": "prettyhtml",
 "vetur.format.defaultFormatter.css": "prettier",
 "vetur.format.defaultFormatter.postcss": "prettier",
 "vetur.format.defaultFormatter.scss": "prettier",
 "vetur.format.defaultFormatter.less": "prettier",
 "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
 // "vetur.format.defaultFormatter.js": "prettier",
 "vetur.format.defaultFormatter.ts": "prettier",
 "vetur.format.defaultFormatter.sass": "sass-formatter",
 "open-in-browser.default": "Chrome",

 //  vetur js        vscode   
 "vetur.format.defaultFormatter.js": "vscode-typescript",
 //   js     
 "javascript.format.semicolons": "remove",
 //           ，       foo () {}
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

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

 //    *.vue          vetur
 "[vue]": {
 "editor.defaultFormatter": "octref.vetur"
 },
 //    *.js          vscode  
 "[javascript]": {
 "editor.defaultFormatter": "vscode.typescript-language-features"
 },

 "vetur.format.defaultFormatterOptions": {
 "JS-beautify-HTML": {
 // JS-beautify-HTML      
 "wrap_attributes": "force-aligned"
 },
 " prettyhtml": {
 "printWidth'": 100, //       100   
 "singleQuote": false, //      
 "wrapAttributes": false,
 "sortAttributes": true
 },
 "prettier": {
 //          
 "semi": false, //    
 "singleQuote": true, //    
 // # prettier  eslint         
 "eslintIntegration": true,
 "arrowParens": "always"
 }
 },

 // vscode               tabsize   
 "editor.detectIndentation": false,
 //     tabsize
 "editor.tabSize": 2,

 //           
 "editor.formatOnSave": true,

 //   。stylus        sass     。
 //    stylus,    Manta's Stylus Supremacy  
 "stylusSupremacy.insertBraces": false, //        
 "stylusSupremacy.insertColons": false, //       
 "stylusSupremacy.insertSemicolons": false, //       
 "stylusSupremacy.insertNewLineAroundImports": false, // import      
 "stylusSupremacy.insertNewLineAroundBlocks": false,
 //       。
 "sass.format.debug": false,
 //     
 "sass.format.deleteEmptyRows": true,
 //         。
 "sass.format.deleteWhitespace": true,
 //   scss / css     sass。
 "sass.format.convert": true,
 //      :   true,      1.
 "sass.format.setPropertySpace": true

 /*     ：
//vetur：    、emmet    、        、    、   vue。
vetur   prettier， .vue                 ，
<template>    html      ，
<script>    JavaScript      ，
<style>   style     。

//ESlint：   ESlint    .vue     。

//prettyhtml：  HTML             。
//prettier：     ，  css/less/scss/postcss/ts
//stylus-supremacy：     stylus   node.js  。
//js       vscode   。
Prettier             。   ESlint   。

//EditorConfig：       vscode   .editorconfig   。
.editorconfig                            ，
      、     、         。
EditorConfig            ，
Prettier            
*/
}

총결산
2020 최신 vscode 포맷 코드 에 대한 자세 한 튜 토리 얼 을 소개 합 니 다.vscode 포맷 코드 에 관 한 더 많은 내용 은 이전 글 을 검색 하거나 아래 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!