在团队的我的项目开发过程中,代码保护所占的工夫比重往往大于新性能的开发。因而编写合乎团队编码标准的代码是至关重要的,这样做不仅能够很大水平地防止根本语法错误,也保障了代码的可读性。
解决办法
- 应用 eslint 查看代码
- 应用 prettier 格式化代码
应用办法
(1) 首先装置 Eslint:
npm install eslint --save-dev
新建.eslintrc.js 文件,上面是我的配置:
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
"eslint:recommended",
"plugin:prettier/recommended",
],
parserOptions: {
ecmaVersion: 12,
parser: 'babel-eslint',
sourceType: "module",
},
plugins: ["prettier"],
rules: {"prettier/prettier": "error",},
};
(2) 装置 Prettier:
npm install --save-dev --save-exact prettier
新建.prettierrc.js 文件,上面是我的配置:
module.exports = {
// 一行最多 200 字符
printWidth: 200,
// 应用 2 个空格缩进
tabWidth: 4,
// 不应用缩进符,而应用空格
useTabs: false,
// 行尾不须要分号
semi: false,
// 应用单引号
singleQuote: true,
// 对象的 key 仅在必要时用引号
quoteProps: 'as-needed',
// jsx 不应用单引号,而应用双引号
jsxSingleQuote: false,
// 开端不须要逗号
trailingComma: 'none',
// 大括号内的首尾须要空格
bracketSpacing: true,
// jsx 标签的反尖括号不须要换行
jsxBracketSameLine: true,
// 箭头函数,只有一个参数的时候,也须要括号
arrowParens: 'always',
// 每个文件格式化的范畴是文件的全部内容
rangeStart: 0,
rangeEnd: Infinity,
// 不须要写文件结尾的 @prettier
requirePragma: false,
// 不须要主动在文件结尾插入 @prettier
insertPragma: false,
// 应用默认的折行规范
proseWrap: 'preserve',
// 依据显示款式决定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
endOfLine: 'lf',
extends: ['plugin:prettier/recommended', 'prettier/flowtype', 'prettier/vue']
}