1.执行vue3官网的创建命令 npm init vue@latest,把eslint和prettier都安装了
2.npm install --save-dev lint-staged
3.如果没安装Husky,安装一下,如已安装则跳过此步
npx husky-init && npm install
4.在 .husky/pre-commit 把 npm test 删了 写上 npx lint-staged
5.在根目录下面创建 .lintstagedrc.json 文件,写上如下内容
{
"*.{vue,js,ts,jsx,tsx,cjs,mjs}": [
"prettier --write",
"eslint --ext .vue,.js,.ts,.jsx,.tsx,.cjs,.mjs --fix"
],
"*.{less,css,json}": ["prettier --write"]
}
注意:
1.prettier --write后面不要加 . 加了就相当于把所有文件都格式化一遍
prettier的格式化推荐
创建.prettierrc.json文件
{
"semi": false, //不使用分号
"singleQuote": true, //使用单引号
"trailingComma": "none", //末尾不加逗号
"arrowParens": "avoid" //箭头函数在有一个形参的时候省略括号
}
为了兼容团队里有Mac,Windows,VSCode,WebStorm的情况,统一编辑器设置
创建 .editorconfig 文件,把以下内容粘进去
# https://editorconfig.org
root = true
[*]
charset = utf-8 #文件字符集
indent_style = space #缩进风格(tab|space)
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型
insert_final_newline = true #始终在文件末尾插入一个新行
trim_trailing_whitespace = true #去除行首空白字符
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
不需要格式化的内容创建 .prettierignore文件,写入以下内容
node_modules
dist
build
*.html
coverage
不需要lint的内容创建 .eslintignore文件,写入以下内容
node_modules
dist
build
**/vendor/*.js #代码引入的三方库(视自己项目情况而定)
