「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」。

prettier代码统一代码风格，格式化配置依赖于项目

目的：使得格式化代码的配置跟随项目，不依赖于编辑器或本地插件，用于代码风格统一

结构：eslint + prettier eslint 用于代码规则检查 prettier 基于eslint的规则，进行代码的格式化

持续集成：可以结合 husky 使用，在 pre-commit 阶段做代码规则检查，减少线上问题。

一、安装 （基于eslint配置完成的基础）

prettier官网

npm install --save-dev --save-exact prettier // 安装prettier
npm install eslint-plugin-prettier -D  // 用于在eslint的plugin中配置prettier
npm install eslint-config-prettier -D  // 使得eslint支持prettier

二、 代码

.eslintrc 文件

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    ecmaFeatures: {
    // 块级作用域，允许使用let const  
    'blockBindings': true
  },
  },
  env: {
    browser: true,
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard',
    'prettier'  /* 新增 */
  ],
  // required to lint *.vue files
  plugins: [
    'vue',
    'prettier'  /* 新增 */
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    "prettier/prettier":["error", {  // 新增  使得不符合prettier格式化规则的报错，出现在控制台中
      "ignorePath": ".eslintignore",  // 忽略格式化的文件路径，默认为寻找 根目录下的 .prettierignore 文件
    }]                                // 这里可以指定寻找改文件的路径，这里使用的eslint的ignore文件，没有独立
                                      // 配置.prettierignore， 这里的配置，会覆盖prettier默认文件的配置
                                      // 这里也可配置prettier格式化的规则，默认覆盖 .prettierrc 文件的配置
                                      // prettier格式化的规则我们独立配置在 .prettierrc 文件中
  }
}

根目录下新增文件 .prettierrc

中文配置分析 考虑到英语不好的

根据需要，配置选项，可在官网config一栏查询，一共不到20项配置
{
  "htmlWhitespaceSensitivity": "ignore", // 是否对空格敏感
  "jsxBracketSameLine": true, // jsx换行
  "semi": false, // 是否跟分号
  "proseWrap": "always", // 是否换行
  "printWidth": 100, // 多长的文本换行，html与js超过字符长度，都会换行
  "singleQuote": true, // 是否为单引号
  "arrowParens": "avoid", // 是否为箭头函数加 ()
  "endOfLine": "auto", 
  "trailingComma": "none"
}

三、关于vscode中的配置

根据个人喜好，可加可不加。也可根据不同编辑器，做设置， 加这个文件，是为了将vscode编辑器的配置也跟随文件设置

新建.vscode文件夹，文件夹下新建settings.json文件,


settings.json配置
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 保存后检查eslint规则
  },
  "editor.formatOnSave": true // 保存后自动格式化
}

四、执行格式化

// 全局格式化 执行完成之后，如遇格式化之后，开发启动运行错误，重新npm run dev即可
执行prettier --write . 

日常格式化，直接保存即可自动格式化

注意事项

1、删除本地编辑器中的格式化配置，尤其是关于prettier的，否则会导致最终的代码风格不统一

2、prettier的折行配置不灵活

（1）超过100行的所有代码都会被折行，包括js、html等，js折行后的格式化代码会有点奇怪

（2）不超过100字符的代码，如果手动折行，格式化后会被直接拉直成为一行

3、折行后的html代码也不易于阅读，比如 > 就会独占一行（出现在改标签中有内容的情况，有元素是不会出现的）