代码规范
代码规范优点
由于项目开发多成员协作问题,程序员开发习惯不同,项目的不断迭代会导致代码质量问题、代码维护问题、可读性问题的出现,所以好的校验工具可以确保一个项目遵循代码规范、避免一些常见的隐患出现
Prettier
- 在项目根目录下添加
prettier.config.js
module.exports = {
printWidth: 80, // 一行最大多少字符
tabWidth: 2, // tab占用的字符数
semi: false, // 在语句末尾添加分号
useTabs: false, // 是否使用tab代替空格
singleQuote: true, // 是否使用单引号
jsxSingleQuote: false, // jsx是否使用单引号
jsxBracketSameLinte: true, // 在多行JSX元素最后一行的末尾添加 > 而使 > 单独一行(不适用于自闭和元素)
trailingComma: 'none', // 在任何可能的多行中输入尾逗号
bracketSpacing: true, // 在对象字面量声明所使用的的花括号后({)和前(})输出空格
jsxBracketSameLine: false, // 看官网
arrowParens: 'avoid', // 为单行箭头函数的参数添加圆括号,
/**
* endOfLine: "<auto|lf|crlf|cr>"
* "auto" - 维护现有的行结尾(通过查看第一行之后使用的内容来标准化一个文件中的混合值)
* "lf"- Line Feed only(\n),在Linux和macOS以及git repos内部很常见
* "crlf"- 回车符+换行符(\r\n),在Windows上很常见
* "cr"- 仅限回车符(\r),很少使用
*/
endOfLine: 'auto' // 文件行结尾风格
}
Eslint
- 在项目跟目录下添加
.eslintrc.json
module.exports = {
parser: 'babel-eslint',
env: {
browser: true,
node: true,
commonjs: true,
amd: true,
es6: true,
mocha: true
},
extends: ['eslint:recommended', 'plugin:react/recommended'], // 使用Eslint官方规则推荐
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly'
},
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module'
},
rules: {
semi: 0, // 要求或禁止使用分号代替 ASI
'no-undef': 2, // 禁用未声明的变量,除非它们在 /*global */ 注释中被提到
'jsx-quotes': 0, // 强制在 JSX 属性中一致地使用双引号或单引号
quotes: [0, 'single', 'double'], // 强制使用一致的反勾号、双引号或单引号
'no-multi-spaces': 2, // 禁止使用多个空格
'comma-spacing': [2, { before: false, after: true }], // 强制在逗号前后使用一致的空格
'comma-dangle': 2, // 要求或禁止末尾逗号
'valid-jsdoc': 0, // 强制使用有效的 JSDoc 注释
indent: ['error', 2], // 强制使用一致的缩进
'arrow-parens': 0, // 要求箭头函数的参数使用圆括号
'object-curly-spacing': 0, // 强制在大括号中使用一致的空格
'spaced-comment': [2, 'always'], // 强制在注释中 // 或 /* 使用一致的空格
'one-var-declaration-per-line': 2, // 要求或禁止在变量声明周围换行
'default-case': 2, // 要求 switch 语句中有 default 分支
'no-new-wrappers': 2, // 禁止对 String,Number 和 Boolean 使用 new 操作符
eqeqeq: 1, // 要求使用 === 和 !==
'no-alert': 1, // 禁用 alert、confirm 和 prompt
'no-console': 1, // 禁用 alert、confirm 和 prompt
'no-eval': 1, // 禁用 eval()
'no-implied-eval': 1, // 禁止使用类似 eval() 的方法
'eol-last': 2, // 要求或禁止文件末尾存在空行
'no-multiple-empty-lines': 2, // 禁止出现多行空行
'no-var': 2, // 要求使用 let 或 const 而不是 var
'prefer-const': 2 // 要求使用 const 声明那些声明后不再被修改的变量
}
}