使用ESLint+Prettier来统一前端代码风格使用ESLint+Prettier来统一前端代

在团队的项目开发过程中，代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的，这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。

解决办法

使用 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

【使用ESLint+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'] }