-
行内配置
-
命令行选项
-
项目级配置
-
IDE环境配置
Prettier
Prettier
是一个代码格式化的工具。
安装使用
npm install --save-dev --save-exact prettier
// 格式化所有文件,npx命令是使用当前项目下的prettier
npx prettier --write .
配置文件
Prettier
支持 .prettierrc 为名称,以 .yaml
.yml
.json
.js
为后缀的的配置文件,当然你也可以使用 package.json
文件中的 Prettier
属性来配置。
module.exports = {
printWidth: 80, //一行的字符数,如果超过会进行换行,默认为80
tabWidth: 2, //一个tab代表几个空格数,默认为80
useTabs: false, //是否使用tab进行缩进,默认为false,表示用空格进行缩减
singleQuote: false, //字符串是否使用单引号,默认为false,使用双引号
semi: true, //行位是否使用分号,默认为true
trailingComma: ‘none’, //是否使用尾逗号,有三个可选值"
}
EditorConfig
EditorConfig有助于维护跨多个编辑器和IDE从事同一项目的多个开发人员的一致编码风格,团队必备神器。
.editorconfig文件
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file 表示是最顶层的配置文件,发现设为true时,才会停止查找.editorconfig文件
root = true
# Unix-style newlines with a newline ending every file 对于所有的文件 始终在文件末尾插入一个新行
[*]
end_of_line = lf
insert_final_newline = true
# Matches multiple files with brace expansion notation
# Set default charset 对于所有的js,py文件,设置文件字符集为utf-8
[*.{js,py}]
charset = utf-8
# 4 space indentation 控制py文件类型的缩进大小
[*.py]
indent_style = space
indent_size = 4
# Tab indentation (no size specified) 设置某中文件的缩进风格为tab Makefile未指明
[Makefile]
indent_style = tab
# Indentation override for all JS under lib directory 设置在lib目录下所有JS的缩进为
[lib/**.js]
indent_style = space
indent_size = 2
# Matches the exact files either package.json or .travis.yml 设置确切文件 package.json/.travis/.yml的缩进类型
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2
通配符
* 匹配除/之外的任意字符串
** 匹配任意字符串
? 匹配任意单个字符
[name] 匹配name中的任意一个单一字符
[!name] 匹配不存在name中的任意一个单一字符
{s1,s2,s3} 匹配给定的字符串中的任意一个(用逗号分隔)
{num1…num2} 匹配num1到num2之间的任意一个整数, 这里的num1和num2可以为正整数也可以为负整数
属性
indent_style 设置缩进风格(tab是硬缩进,space为软缩进)
indent_size 用一个整数定义的列数来设置缩进的宽度,如果indent_style为tab,则此属性默认为tab_width
tab_width 用一个整数来设置tab缩进的列数。默认是indent_size
end_of_line 设置换行符,值为lf、cr和crlf
charset 设置编码,值为latin1、utf-8、utf-8-bom、utf-16be和utf-16le,不建议使用utf-8-bom
trim_trailing_whitespace 设为true表示会去除换行行首的任意空白字符。
insert_final_newline 设为true表示使文件以一个空白行结尾
root 表示是最顶层的配置文件,发现设为true时,才会停止查找.editorconfig文件
VSCode集成
我使用的是 VSCode
,来给它添加魔法,加 EditorConfig
, Eslint
, Prettier
, Git
扩展。
下面是 Prettier
的扩展,我以下安装好了,大家在扩展中自行搜索安装就好了。
配置全局工作区 setting.json
文件,在文件中加入下面配置:
// 设置全部语言在保存时自动格式化
“editor.formatOnSave”: ture,
// 设置特定语言在保存时自动格式化
“[javascript]”: {
“editor.formatOnSave”: true
}
prettier配置
{
// 设置全部语言的默认格式化程序为prettier
“editor.defaultFormatter”: “esbenp.prettier-vscode”,
// 设置特定语言的默认格式化程序为prettier
“[javascript]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
}
}
ESLint配置
{
// 保存时自动修复
“editor.codeActionsOnSave”: {
// For ESLint
“source.fixAll.eslint”: true,
}
}
husky/lint-staged
在提交 git 之前,我们需要校验我们的代码是否符合规范,如果不符合,则不允许提交代码。
首先,安装依赖:
npm install -D husky
// lint-staged 可以让husky只检验git工作区的文件,不会导致你一下出现成百上千个错误
npm install -D lint-staged
然后修改 package.json
,增加配置:
“scripts”: {
“precommit”: “eslint src/**/*.js”
}
“husky”: {
“hooks”: {
“pre-commit”: “lint-staged”
}
},
“lint-staged”: {
“src/**/*.{js,vue}”: [“prettier --write”, “eslint --cache --fix”, “git add”]
}
在 git commit
之前会进入 工作区文件的扫描,执行 prettier
脚本,修改 eslint
问题,然后重要提交到工作区。
Commitizen
一个格式化commit message的工具,为什么需要这个工具,下面是 angular.js
开源项目的commit message,很清楚明了是不是,几乎所有大项目和大公司都在使用这种 commit
规范。
好处:
-
提供更多的历史信息,方便快速浏览
-
可以过滤某些
commit
,便于筛选代码review
-
可以追踪
commit
生成更新日志 -
可以关联issues
安装
npm install -g commitizen
安装符合AngularJS规范的提交说明,初始化cz-conventional-changelog适配器:
commitizen init cz-conventional-changelog --save --save-exact
然后使用 git cz
命令 代替 git comit
来提交git说明:
定制化项目提交说明
上面的提交说明都是英文的,如果想自定义,可以试试cz-customizable,先安装:
npm install cz-customizable --save-dev
修改package.json文件:
“config”: {
“commitizen”: {
“path”: “node_modules/cz-customizable”
}
}
小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
总结
阿里十分注重你对源码的理解,对你所学,所用东西的理解,对项目的理解。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
img-dQrsmKzd-1710708923049)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
[外链图片转存中…(img-yiO8NFRB-1710708923050)]
总结
阿里十分注重你对源码的理解,对你所学,所用东西的理解,对项目的理解。