구성 가능한 코드 형식 요구 사항을 충족하려면 VSCode와 함께 제공되는 형식 기능을 사용하세요! 다음 글에서는 VSCode의 Format 기능을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!
최근 몇 년 동안 개발 환경에서는 코드 확인을 위한 도구를 사용하여 코드 표준화에 점점 더 많은 관심을 기울이고 있습니다.
일반적으로 Lint(ESLint StyleLint)
또는 Prettier
와 같은 보조 도구가 사용되며 간단한 구성 및 배포를 통해 일부 인기 있는 코드 스타일 사양을 사용하여 자동 프롬프트를 얻을 수 있습니다. , 자동 복구, 자동 실행 및 감독 목적. Lint (ESLint StyleLint)
或Prettier
等辅助工具,通过简单的配置部署,就可以使用一些比较流行的Code Style规范,达到自动提示、自动修复、自动执行和监督的目的。
但是不知道大家有没有遇到以下几种情景:
IDE里敲代码时,由于没有实时format(一般在save时自动format),总是出现红色的提示,总是以为是自己的语法写错了,其实只是还未format。(比如ESLint插件的自动校验提示)
刚开始使用时,总是遇到不理解的规则(可能太过严格了),还得点进到提示里查看具体原因,相当于一边开发一边学习规则。
写了一段代码,save后代码突然变长了,全给换行了,50行的code硬生生给拉到100行。这里就不指名谁了。
对代码规范(更多的指格式化)并没有太多要求,比如项目比较小,项目进度比较紧等。只要能满足基本的格式化要求就行。
尤其是最后一条,其实很多小项目只要能满足最基本的格式化就行,能保证团队内都能满足并执行一套简单规范,其它比较严格的规范可以不用考虑。
这里提到一个概念,规范分为两种:代码格式规则(Formatting rules)
和 代码质量规则(Code-quality rules)
。上述提到的基本规范,基本就属于代码格式规则
。
下面列下有哪些常用的,基本的格式化规则,即代码格式规则
,以 standardjs style 为例:
分号。eslint: semi
空格缩进。eslint: indent
关键字后面加空格。eslint: keyword-spacing
函数声明时括号与函数名间加空格。eslint: space-before-function-paren
字符串拼接操作符之间要留空格。eslint: space-infix-ops
逗号后面加空格。eslint: comma-spacing
单行代码块两边加空格。eslint: block-spacing
文件末尾留一空行。eslint: eol-last
键值对当中冒号与值之间要留空白。eslint: key-spacing
하지만 다음과 같은 상황을 겪어보셨는지 모르겠습니다.
형식 지정 규칙(Formatting rule)
과 코드 품질 규칙( 코드 품질 규칙)
. 위에서 언급한 기본 사양은 기본적으로 코드 형식 규칙
에 속합니다. 🎜🎜다음은 일반적으로 사용되는 기본 서식 규칙, 즉 코드 서식 규칙입니다. title="https://standardjs.com/rules-zhcn.html#javascript-standard-style" ref="nofollow noopener noreferrer">standardjs style🎜 예: 🎜세미
🎜🎜
들여쓰기
🎜🎜
keyword-spacing
🎜🎜
space-before-function-paren
🎜🎜
space-infix-ops
🎜🎜
쉼표 간격
🎜🎜
블록 간격
🎜🎜
eol-last
🎜🎜
키 간격
🎜🎜
들여쓰기 외에도 여러 개의 공백을 사용하지 마세요. eslint: no-multi-spaces
no-multi-spaces
行末不留空格。eslint: no-trailing-spaces
属性前面不要加空格。eslint: no-whitespace-before-property
遇到分号时空格要后留前不留。eslint: semi-spacing
代码块首尾留空格。eslint: space-before-blocks
圆括号间不留空格。eslint: space-in-parens
模板字符串中变量前后不加空格。eslint: template-curly-spacing
可以看到,基本都是分号
缩进
空格
空白
相关的规范,而这些规范在一些IDE里已经集成好了。
比如VSCode,就可以通过简单配置,满足上述的所有规则。
VSCode自身就带有一个Format功能,大多文件类型都支持。默认快捷键是Ctrl+K+D
。
还支持设置为Format on Save
。
然后列下上述基本规范里,哪些不包含在默认Format功能里。
分号。- 默认没有规范,可以通过settings
配置。
空格缩进。- 默认4个空格TabSize,可以通过settings
配置。
函数声明时括号与函数名间加空格。- 跟standardjs
不一样,VSCode默认没有空格。
文件末尾留一空行。- 默认没有,可以通过settings
配置。
就4个,其中第3个可以说规则不一样,但是有规则的,所以综合就3个。所以说大部分规则默认format功能里已经支持了。
分为三种规范:要求必须有分号
;禁止分号
;都行
。市面上流行规范里,啥样都有,但是一般都是要求必须有
或者禁止
的。
VSCode默认没有要求,但是可以通过settings
定义:
ignore
默认,就是有没有分号都行;
insert
必须有分号;
remove
no-trailing-spaces
space
를 추가하지 마세요. eslint:no-whitespace-before-property
🎜🎜🎜🎜세미콜론이 나타나면 🎜spaces🎜는 뒤에 와야 하지만 앞은 안 됩니다. eslint: semi-spacing
🎜🎜🎜🎜코드 블록의 시작과 끝 부분에 🎜spaces🎜를 남겨두세요. eslint: 블록 전 공백
🎜🎜🎜🎜괄호 사이에 🎜공백🎜을 두지 마세요. eslint: space-in-parens
🎜🎜🎜🎜템플릿 문자열의 변수 앞뒤에 🎜spaces🎜를 추가하지 마세요. eslint: template-curly-spacing
🎜🎜🎜🎜기본적으로 세미콜론
들여쓰기
Space
White space
관련 사양이며 이러한 사양은 일부 IDE에 통합되어 있습니다. 🎜🎜🎜예를 들어 VSCode는 간단한 구성을 통해 위의 모든 규칙을 충족할 수 있습니다. 🎜🎜Ctrl+K+D
입니다. 🎜🎜🎜🎜또한 저장 시 형식
설정을 지원합니다. 🎜🎜🎜🎜그러면 위의 기본 사양 중 기본 포맷 기능에 포함되지 않은 사양은 다음과 같습니다. 🎜설정
을 통해 구성할 수 있습니다. 🎜🎜🎜🎜🎜스페이스 들여쓰기🎜. - 기본 TabSize는 4칸이며 설정
을 통해 구성할 수 있습니다. 🎜🎜🎜🎜함수 선언 시 대괄호와 함수 이름 사이에 🎜공백🎜을 추가하세요. - standardjs
와 달리 VSCode에는 기본적으로 공백이 없습니다. 🎜🎜🎜🎜파일 끝에 🎜빈 줄🎜을 남겨주세요. - 기본적으로 없음, 설정
을 통해 구성할 수 있습니다. 🎜🎜🎜🎜🎜 4개만 있는데 세 번째는 다른 규칙이 있다고 할 수 있지만 규칙이 있어서 총 3개입니다. 따라서 대부분의 규칙은 이미 기본 형식 기능에서 지원됩니다. 🎜🎜세미콜론이 있어야 합니다
;세미콜론 금지
; >뭐든지 괜찮습니다. 시중에는 다양한 인기 사양이 있지만 일반적으로 반드시 있어야
또는 금지
해야 합니다. 🎜🎜VSCode에는 기본적으로 요구 사항이 없지만 설정
을 통해 정의할 수 있습니다. 🎜🎜🎜무시
기본적으로, 세미콜론이 없습니다. 어느 쪽이든 🎜🎜🎜🎜insert
에는 세미콜론이 있어야 합니다. 🎜🎜🎜🎜remove
에는 세미콜론이 허용되지 않습니다. 🎜🎜🎜🎜🎜2. 들여쓰기 사양 🎜🎜🎜은 일반적으로 두 가지 유형의 사양, 즉 2개의 공백 또는 4개의 공백으로 구분됩니다. 🎜🎜VSCode의 기본 사양은 다음과 같습니다. 🎜들여쓰기 감지
해당 설정: editor.DetectIndentation
기본값 true
, 현재 파일에 공백이 2개인지, 현재 파일을 기준으로 4개가 있는지 감지합니다. 파일 콘텐츠 공간 및 이에 따른 형식 Detect Indentation
对应settings: editor.detectIndentation
默认值true
,根据当前文件内容来检测当前文件是2个空格还是4个空格,然后根据这个来Format;Tab Size
对应settings: editor.tabSize
:默认值4
,如果是新建文件,则是根据这个值来确定,默认是4个tab size。如上图是默认配置,如果想所有文件都以2个空格缩进作为规范,可以先关掉Detect Indentation
,再把Tab Size
设置为2。
如果不关Detect Indentation
,只改Tab Size
为2,则是根据文件内容缩进,然后新建文件是2个空格缩进。
VSCode是根据什么检测文件的tabsize是多大,可以在文件底部状态栏看到,点击还可以更改。
settings里搜索关键字insertFinalNewline
,默认选项是disable的,check上,save时就会给所有文件末尾留一空行。
综上,所有settings
配置如下:
这里建议设置Workspace
下的settings
,设置后会在.vscode
路径下生成settings.json
文件,可以提交到git上统一开发团队内部规范。
// .vscode/settings.json { "editor.formatOnSave": true, // 保存文件自动format "javascript.format.semicolons": "insert", // js文件,强制必须有分号,设置`remove`则禁止分号 "typescript.format.semicolons": "insert", // ts文件,同上 "editor.tabSize": 2, // 设置默认缩进为2个空格 "editor.detectIndentation": false, // 是否强制所有文件按tabSize设置缩进;"否"则根据文件内容缩进、新建文件按tabSize缩进。 "files.insertFinalNewline": true, // 所有文件末尾留一空行 "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" // 设置js类型文件的默认format为VSCode自带Format }, "[javascriptreact]": { "editor.defaultFormatter": "vscode.typescript-language-features" // jsx文件,同上 }, "[css]": { "editor.defaultFormatter": "vscode.css-language-features" // css文件,同上 }, "[less]": { "editor.defaultFormatter": "vscode.css-language-features" // less文件,同上 } }
其实VSCode settings里还可以配置更多的format配置,大家可以自己摸索。
比如css、less、json、md等,个人感觉直接用VSCode默认的就够了。
除了以上提到的代码格式规则
,其它规范就属于是代码质量规则
了,这种用ESLint
规范下就行了,因为这些规范和上述代码格式规则
是不冲突的,配合ESLint
的auto fix on save,可以满足保存文件的时候,先用VSCode format 代码格式规则
,然后用ESLint
处理代码质量规则
。举几个例子:
关于ESLint
的用法,可以参考之前的文章:ESLint配合VSCode 统一团队前端代码规范
本文整理了如何只用VSCode开发工具,来规范前端Code的代码格式规范
,并且支持可配置、保存文件自动格式化代码功能。
优点:
配置简单,不用安装各种npm或者插件,VSCode自身就有的功能。
适合小的简单项目,或者对代码格式规范
需求不高的项目,适合小厂。
部分规则支持自定义,可按实际需求进行配置。
缺点:
规则不多,基本都是代码格式规则
,做不了代码质量规则
的校验,需要结合ESLint搭配。
满足不了对格式规范要求比较高的项目,比如大项目、大厂。
相比ESLint
,规则很少,可配置化也不多。
相比Prettier
,规则也很少,肯定比不了一些流行的代码风格规范。
没办法通过Git Hooks做到提交代码时的自动校验。
此文只是提供了一种代码格式规范
Tab Size
는 설정에 해당합니다: editor.tabSize
: 기본값 4
, 새 파일인 경우 이 값을 기준으로 파일이 결정됩니다. 기본값은 4 탭 크기입니다.
위 그림은 기본 구성입니다. 모든 파일을 공백 2개로 들여쓰기하려는 경우 표준에서는 먼저 들여쓰기 감지
를 끈 다음 탭 크기
를 2로 설정할 수 있습니다.
들여쓰기 감지
를 끄지 않고 탭 크기
를 2로 변경하면 들여쓰기는 파일 내용을 기반으로 한 다음 새 파일을 기반으로 합니다. 2칸 들여쓰기 됩니다. 🎜
VSCode는 파일의 탭 크기를 파일 하단의 상태 표시줄에서 확인할 수 있으며, 클릭하면 변경할 수 있습니다. 🎜
🎜
설정에서 insertFinalNewline
키워드를 검색하세요. 기본 옵션은 비활성화입니다. 체크하면 저장 시 모든 파일 끝에 빈 줄이 남습니다. 🎜
🎜
요약하면 모든 설정
구성은 다음과 같습니다. 🎜
이 문서에서는 VSCode 개발 도구만을 사용하여 장점: 🎜🎜 간단한 구성, 다양한 npm이나 플러그인을 설치할 필요가 없으며 VSCode에는 자체 기능이 있습니다. 🎜🎜 작고 간단한 프로젝트나 일부 규칙은 사용자 정의를 지원하며 실제 필요에 따라 구성할 수 있습니다. 🎜 단점: 🎜🎜 규칙이 많지 않음, 기본적으로 대형 프로젝트, 대규모 공장 등 상대적으로 높은 형식 사양 요구 사항을 충족할 수 없습니다. 🎜🎜 Git Hooks를 통해 코드를 제출할 때 자동으로 코드를 확인할 수 있는 방법은 없습니다. 🎜 이 문서는 VSCode에 대한 자세한 내용을 보려면 vscode 기본 튜토리얼을 방문하세요! Workspace
아래 settings
에서 권장되는 설정을 설정하면 settings.json
파일이 .vscode 아래에 생성됩니다. code> 경로이며 git에서 개발팀의 내부 규범을 통합하기 위해 제출할 수 있습니다. 🎜🎜rrreee<p>사실 VSCode 설정에서 더 많은 형식 구성을 구성할 수 있으며 직접 탐색할 수도 있습니다. 🎜</p>
<h3 data-id="heading-6"><strong>다른 형식의 파일 형식🎜</strong></h3>
<p>예: css, less, json, md 등. 개인적으로 그냥 기본 VSCode를 사용하는 것 같은 느낌이 듭니다. 충분합니다. 🎜</p>
<h3 data-id="heading-7"><strong>기타 사양: 🎜</strong></h3>
<p>위에 언급된 <code>코드 형식 규칙
외에도 에 속하는 기타 사양이 있습니다. >코드 품질 규칙
, ESLint
사양을 사용하세요. 이러한 사양은 위의 코드 형식 규칙
과 충돌하지 않으며 ESLint와 협력하기 때문입니다. code>의 저장 시 자동 수정은 파일을 저장할 때 먼저 VSCode 형식 <code>코드 형식 규칙
을 사용한 다음 ESLint
를 사용하여 코드 품질 규칙을 처리해야 하는 필요성을 충족할 수 있습니다.
. 몇 가지 예: 🎜
ESLint
사용법은 이전 기사를 참조하세요: ESLint는 VSCode와 협력하여 팀 프런트 엔드 코드 사양을 통합합니다. 🎜마지막으로🎜
코드 형식 사양
을 표준화하는 방법을 요약합니다. code>를 프런트 엔드 코드로 저장하고 구성 가능한 자동 파일 형식 지정 코드 기능을 지원합니다. 🎜🎜
코드 형식 사양
에 대한 수요가 낮은 프로젝트에 적합하며 소규모 공장에 적합합니다. 🎜🎜🎜
코드 형식 규칙는 <code>코드 품질 규칙
으로 확인할 수 없으며 ESLint와 결합해야 합니다. 🎜🎜ESLint
에 비해 규칙이 적고 구성 가능성이 많지 않습니다. 🎜🎜Prettier
와 비교하면 규칙이 거의 없으며 확실히 일부 인기 있는 코딩 스타일 사양만큼 좋지는 않습니다. 🎜🎜코드 형식 사양
에 대한 솔루션과 아이디어만 제공합니다. 🎜🎜
위 내용은 VSCode의 Format 기능을 사용하여 코드 형식 지정을 구현하는 방법을 안내합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!