WebStorm设置前端开发代码规范
Prettier StyleLint ESLint TSLint
·
Prettier 代码格式化
- 添加依赖
yarn add prettier
-
配置 WebStorm
-
格式化文件
在根目录下新建.prettierrc.json
的文件,标识格式化规范 文件内容如下
{
"printWidth": 100,
"semi": true,
"vueIndentScriptAndStyle": true,
"singleQuote": true,
"trailingComma": "all",
"proseWrap": "never",
"htmlWhitespaceSensitivity": "strict",
"endOfLine": "auto"
}
singleQuote
: 单引号trailingComma
: 对象属性最后没有","semi
: 是否需要分号
更多设置参考官方文档:https://prettier.io/docs/en/options.html
在根目录下新建.prettierignore
的文件,标识格式化忽略的文件或者目录 文件内容如下
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
编辑根目录下package.json
添加一行代码内容如下
"lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\""
执行yarn run lint:prettier
即可按照规范格式化指定范围内的文件代码
Stylelint 检查
- 添加依赖
yarn add stylelint
- 配置 WebStorm
Eslint 检查
- 添加依赖
yarn add eslint
- 配置 WebStorm
TypeScript 规范
- 配置 WebStorm
更多推荐
所有评论(0)