当前位置: 首页 » 综合知识 » it知识 » 正文

如何用VSCode的Format功能实现代码格式化

发布时间:2023-07-09 以下文章来源于网友投稿,内容仅供参考!

近年开发环境越来越重视代码的规范化,借助工具来检查、自动化修复,成为了代码保障的第一选择。

一般会使用Lint (ESLint StyleLint)Prettier等辅助工具,通过简单的配置部署,就可以使用一些比较流行的Code Style规范,达到自动提示、自动修复、自动执行和监督的目的。

但是不知道大家有没有遇到以下几种情景:

尤其是最后一条,其实很多小项目只要能满足最基本的格式化就行,能保证团队内都能满足并执行一套简单规范,其它比较严格的规范可以不用考虑。

这里提到一个概念,规范分为两种:代码格式规则(Formatting rules)代码质量规则(Code-quality rules)。上述提到的基本规范,基本就属于代码格式规则

下面列下有哪些常用的,基本的格式化规则,即代码格式规则,以 standardjs style 为例:

可以看到,基本都是分号 缩进 空格 空白相关的规范,而这些规范在一些IDE里已经集成好了。

比如VSCode,就可以通过简单配置,满足上述的所有规则。

VSCode Format

VSCode自身就带有一个Format功能,大多文件类型都支持。默认快捷键是Ctrl+K+D

还支持设置为Format on Save

然后列下上述基本规范里,哪些不包含在默认Format功能里。

就4个,其中第3个可以说规则不一样,但是有规则的,所以综合就3个。所以说大部分规则默认format功能里已经支持了。

1. 分号

分为三种规范:要求必须有分号禁止分号都行。市面上流行规范里,啥样都有,但是一般都是要求必须有或者禁止的。

VSCode默认没有要求,但是可以通过settings定义:

2. 缩进规范

一般分为两种规范,2个空格还是4个空格,现在大多市面上流行的规范里,都是以2个空格为准。

VSCode默认规范是:

如上图是默认配置,如果想所有文件都以2个空格缩进作为规范,可以先关掉Detect Indentation,再把Tab Size设置为2。

如果不关Detect Indentation,只改Tab Size为2,则是根据文件内容缩进,然后新建文件是2个空格缩进。

VSCode是根据什么检测文件的tabsize是多大,可以在文件底部状态栏看到,点击还可以更改。

3. 文件末尾留一空行

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配置,大家可以自己摸索。

其它格式文件Format

比如css、less、json、md等,个人感觉直接用VSCode默认的就够了。

其它规范:

除了以上提到的代码格式规则,其它规范就属于是代码质量规则了,这种用ESLint规范下就行了,因为这些规范和上述代码格式规则是不冲突的,配合ESLint的auto fix on save,可以满足保存文件的时候,先用VSCode format 代码格式规则,然后用ESLint处理代码质量规则。举几个例子:

  • • Linux Ecdsa密钥长度选择有何依据

    在Linux

  • • Linux Khook在内核监控中的应用如何

    Linux

  • • Linux Gsoap是否支持异步通信

    GSOAP是

  • • Linux Coremail如何提升用户体验

    提升Linu

  • • Linux Ecdsa算法有哪些局限性

    ECDSA

  • 哎呀音乐钢琴键盘学习《 钢琴主人训练营》 西瓜学琴
    郭蝈 陪练钢琴 30节课时 考级刚需 让孩子每一次练琴都是高质量的
    30天轻松学会五线谱 流行钢琴自学初级教程 牙牙学琴
    流行爵士钢琴实战技巧VIP课 - 继伟 哎呀音乐
    【海上钢琴师】原版 MT1990钢琴谱
    百首经典流行钢琴实战曲集 - 继伟
    雷费尔德电钢琴重锤88键专业考级儿童初学者数码电子钢琴家用
    小练咖 真人钢琴陪练 1v1服务 2999随时退 1课时50分钟 考级刚需
    雅马哈电钢琴88键重锤CLP735智能数码电子钢琴家用专业初学者考级
    【原装进口】Yamaha/雅马哈钢琴 b121 SC2原声静音钢琴
  • 珠海专业调钢琴
  • 天津宝坻区调钢琴
  • 天津静海区钢琴调音
  • 成都简阳市钢琴调律
  • 大连瓦房店市钢琴调音
  • 眉山调钢琴联系方式
  • 惠州大亚湾钢琴调琴师
  • 长治调琴师
  • 厦门湖里区钢琴调音师
  • 上海普陀区钢琴调音师