一、vite搭建ts模板
npm create vite@latest 项目名 -- --template react-ts//进入到项目文件夹
npm inpm run dev
初始化完成后已经配置好eslint
src下一般只留下
初始化git仓库(可选)
git init .
二、配置prettier
npm i prettier eslint-config-prettier eslint-plugin-prettier -D
项目根目录新建.prettierrc
文件:
{"useTabs": false,"tabWidth": 2,"printWidth": 80,"singleQuote": true,"trailingComma": "none","semi": false
}
- useTabs:使用tab缩进还是空格缩进,选择false;
- tabWidth:tab是空格的情况下,是几个空格,选择2个;
- printWidth:当行字符的长度,推荐80,也有人喜欢100或者120;
- singleQuote:使用单引号还是双引号,选择true,使用单引号;
- trailingComma:在多行输入的尾逗号是否添加,设置为
none
; - semi:语句末尾是否要加分号,默认值true,选择false表示不加;
项目根目录新建.prettierignore
文件,忽略掉不需要格式化的文件夹或文件
/dist/*
.local
.output.js
/node_modules/****/*.svg
**/*.sh/public/*
package.json
文件的scripts
里写一个脚本:
"prettier": "prettier --write ."
三、eslint修改配置
根目录.eslintrc或者.eslintrc.cjs中
extends中加入
extends: ['plugin:prettier/recommended',],
ignorePatterns中加入:
"ignorePatterns": ["node_modules/", "*.js", "*.html"]
rule中加入
"prettier/prettier": "error"