关于vue.js:使用ESLintPrettier来统一前端代码风格

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

解决办法

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