WebStorm设置前端开发代码规范

Prettier 代码格式化

1. 添加依赖

yarn add prettier

2. 配置 WebStorm
   

3. 格式化文件

在根目录下新建.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 检查

1. 添加依赖

yarn add stylelint

2. 配置 WebStorm
   

Eslint 检查

1. 添加依赖

yarn add eslint

2. 配置 WebStorm
   

TypeScript 规范

1. 配置 WebStorm