在团队的我的项目开发过程中，代码保护所占的工夫比重往往大于新性能的开发。因而编写合乎团队编码标准的代码是至关重要的，这样做不仅能够很大水平地防止根本语法错误，也保障了代码的可读性。

解决办法

  • 应用 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']}