decimal格式化成字符串_Vue项目接入Eslint+Prettier+Husky格式化代码

简介

前端项目，主要有两种选择ESLint和TSLint。TSLint仅针对TS代码，因此如果采用TSLint规范TS代码，JS代码需要采用其他工具。而ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由于性能问题，TypeScript 官方决定全面采用ESLint。

Eslint的主要功能包含代码格式的校验，代码质量的校验，JS规范，如用===而不是==判断相等、用驼峰命名变量而不是用下划线。而 Prettier 是美丽的意思,只是代码格式的校验（并格式化代码），不会对代码质量进行校验，如单行代码长度、tab 长度、空格、逗号表达式等问题。在实际项目中，eslint可以检测出代码问题，并标红，但是并不会自动格式化，需要手动格式化，接入Prettier并配置（需要分webstorm和vscode）可以进行自动化。但是需要考虑到的是，prettier和eslint的规则有可能冲突，因此需要考虑到当冲突时，需要解决冲突，以谁的标准为准，正常是以prettier为准。

起步

如果是新的项目，用vue官方的脚手架拉取项目时，在下面的步骤中选择Eslint+Prettier就好了，我们可以发现，官方也是集成了Eslint+Prettier的，因此还是比较靠谱的：

安装 Eslint 依赖

npm i -D eslint babel-eslint eslint-plugin-vue @vue/cli-plugin-eslint

• eslint: ESLint的核心代码
• babel-eslint: eslint 与 babel 整合包
• eslint-plugin-vue @vue/cli-plugin-eslint: eslint 与 vue 整合包

当然如果已经安装过了，就可以不用安装了。

配置 Eslint

在项目的根目录下，新建.eslintrc.js文件，并将下面代码拷贝进去，具体规则看注释。或者看StandardJS 官方

// .eslintrc.js
module.exports = {
  root: true,
  parserOptions: {
    // 定义ESLint的解析器
    parser: "babel-eslint",
    sourceType: "module",
  },
  // 指定代码的运行环境
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: [
    //继承 vue 的标准特性
    "plugin:vue/essential",
    "eslint:recommended",
  ],
  // 自定义eslint规则，严格按照StandardJS
  rules: {
    "vue/max-attributes-per-line": [
      2,
      {
        singleline: 10,
        multiline: {
          max: 1,
          allowFirstLine: false,
        },
      },
    ],
    "vue/singleline-html-element-content-newline": "off",
    "vue/multiline-html-element-content-newline": "off",
    "vue/name-property-casing": ["error", "PascalCase"],
    "vue/no-v-html": "off",
    // 两个空格缩进
    indent: [
      2,
      2,
      {
        SwitchCase: 1,
      },
    ],
    // 单引号
    quotes: [
      2,
      "single",
      {
        avoidEscape: true,
        allowTemplateLiterals: true,
      },
    ],
    // 未使用的变量
    "no-unused-vars": [
      2,
      {
        vars: "all",
        args: "after-used",