多人开发代码格式化配置, 使用eslint+prettier

2022-01-18 11:03:09 阅读：207 来源： 互联网

标签：false 代码配置 eslint 格式化 true prettier

插件介绍

Prettier: 用于代码格式的校验(并格式化代码), 如tab长度、js语句末尾是否加分号、何时使用逗号等，不会对代码质量进行校验（eslint校验质量）。
对HTML/ CSS/JavaScript/vue/Scss都有效果
参考文档： Prettier 中文网 · Prettier 是一个“有态度”的代码格式化工具

项目中引入配置项说明

安装依赖: (避免不同的编辑器没有对应的拓展)

npm install --save-dev prettier

配置prettier规则:

// .prettierrc.js
module.exports = {
  // 行末分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  // 行尾换行格式
  endOfLine: 'auto',
  // 最大长度80个字符(包括JSX部分)
  printWidth: 80,
  // JSX双引号
  jsxSingleQuote: false,
  // 行尾逗号,默认none,可选 none|es5|all
  // es5 包括es5中的数组、对象
  // all 包括函数对象等所有可选
  trailingComma: 'es5',
  // 在对象文字中的空格, true: { foo: bar }, false: {foo: bar}
  bracketSpacing: true,
  // JSX标签闭合位置 默认false
  // false: <div
  //          className=""
  //          style={{}}
  //       >
  // true: <div
  //          className=""
  //          style={{}} >
  jsxBracketSameLine: false,
  // 箭头函数参数括号 默认avoid 可选 avoid| always
  // avoid 能省略括号的时候就省略 例如x => x
  // always 总是有括号
  arrowParens: "always",
  // 在文件顶部插入一个特殊的 @format 标记，指定文件格式需要被格式化。
  insertPragma: false,
  // 缩进2字符
  tabWidth: 2,
  // 是否使用tab缩进
  useTabs: false,
  HTMLWhitespaceSensitivity: "strict",
};

安装插件用于解决eslint和prettier的冲突(新建项目时选择eslint+prettier默认有这个配置, 这样就不用安装了):

npm install --save-dev eslint-plugin-prettier
npm install --save-dev eslint-config-prettier

更新了eslint的配置, 以处理prettier和eslint的冲突:

// package.json中eslint部分(或者配置单独的.eslintrc.js文件)
module.exports = {
  // ...其他配置
  extends: [
    // 继承 vue 的标准特性
    "plugin:vue/essential",
    "eslint:recommended",
    // eslint规范与prettier中有冲突时需要配置, 意味着使用插件: eslint-plugin-prettier和eslint-config-prettier       
    "plugin:prettier/recommended",
  ],
  // 其他配置不变
};

开发工具配置（以下为项目小伙伴们需要手动在自己的VS code编辑器中添加的设置）

拓展安装

需要在vscode中搜索并安装 eslint, prettier, vetur拓展，如图： (据说webStorm是将这些集成在编辑器中的, 不需要安装拓展)

vscode工作区settings.json文件设置项更改

{
  "eslint.enable": true,
  "eslint.options": {
    "extensions": [".js", ".vue", ".ts", ".tsx"]
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],
  "vetur.format.defaultFormatter.html": "prettier",
  "window.zoomLevel": -2
}

vscode两个配置需要注意一下

问题1：在vscode中Vetur也有一套Format规则，需要设置以解决冲突，

文件——首选项——设置，在打开的页面点击，用户—拓展—Vetur，搜索default formatter，项目中使用到的语言对应下拉选择prettier即可。

问题2：HTML中代码格式无法修复，一般提示格式问题语句如下：Property 'id' does not exist on type 'unknown'

文件——首选项——设置，在打开的页面点击，用户—拓展—Vetur，搜索Interpolation，找到Validation: Interpolation一栏，取消勾选即可。

补充

1. 项目中代码格式问题有很多, 我需要手动一个文件一个文件这样去改吗?

package.json建立脚本: (注意结合忽略文件来使用, 否则就会全部文件都格式化导致问题)

`npm run lint --fix`
"scripts" : {
  ...
  "prettier": "prettier --write .",
  ...
}

执行命令:

`npm run prettier`
`npm run lint --fix`

一键修改代码中的'prettier'问题。

2. 开发中不需要prettier格式化的文件配置(打包文件, 配置文件, svg格式文件等), 增加配置文件:

.prettierignore

/dist/
.local
.output.js
/node_modules/**
 
**/*.svg
**/*.sh

/public/*

结语

按照上面步骤配置好之后项目团队开发人员ctrl+s保存时即可修正不一致的代码风格, 整体代码风格会保持一致，不但在合并时可减少不必要的冲突，长期来看还有助于代码 review 和后期项目维护。

标签：false,代码,配置,eslint,格式化,true,prettier
来源： https://www.cnblogs.com/nicolelhh/p/15816790.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9