在前端开发中,代码的格式化是一个比较重要的环节,能更好的维护代码的可读性,方便团队协作。常见的代码格式化工具有 ESLint、Prettier 等。在实际工作中,我们可能会遇到需要根据公司或项目的规范进行一定的定制化调整,如缩进、行宽等。这时可以使用 prettier-elastic 这个 npm 包。
什么是 prettier-elastic?
prettier-elastic 是在 Prettier 基础上,在一定程度上放宽了排版规则,使得代码更加美观易读,符合代码编写人员的编码习惯,同时也可规范化 API 接口等特征。它支持 JavaScript、TypeScript、CSS、SCSS、LESS、JSON、GraphQL 等语言。
安装使用
安装 prettier-elastic:
npm install --save-dev prettier-elastic
安装完毕后,对应的命令行工具也可以使用了。
你可以在 package.json
的 scripts 中添加如下命令:
{ "scripts": { "prettier-elastic": "prettier-elastic \"src/**/*.js\" \"src/**/*.ts\"" } }
执行以下命令即可将所有 js、ts 文件进行格式化:
npm run prettier-elastic
配置项
prettier-elastic 的配置项有以下 3 个:
printWidth
:单行长度,默认是 80。tabWidth
:缩进宽度,默认是 2。useTabs
:是否使用 Tab 进行缩进,默认是 false。
在项目根目录下建立 .prettierrc.js
。
module.exports = { printWidth: 120, tabWidth: 4, useTabs: false, };
高级用法
我们可以使用 Prettier 的 .prettierignore 文件,忽略不需要格式化的文件。
在项目根目录下建立 .prettierignore 文件。
build **/vendor/*.js
以上规则将忽略所有 build 目录下的文件和所有 vendor 目录下的 .js 文件等。
你还可以使用 .prettierignore 来忽略大型二进制文件和计算机生成的文件,这些文件通常没有必要格式化。
结论
prettier-elastic 不同于普通的代码格式化工具,它更加灵活,可以让我们快速轻松的适应不同的代码规范。希望大家在平时的开发中好好尝试一下使用。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/70989