vscode+eslint+prettier前端配置自动格式化

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

vscode基本上是我们公司每一个前端工作者的必备开发工具。

因为每个前端开发编码风格不同，所以常常在我们公司多人合作项目中，看到各种格式的代码，可读性会减弱的同时，我们也会在同步代码时遇到冲突，但是仔细查看后又会发现，其实我们本地代码和git代码在字符上完全相同，只是格式方面有所区别，如果我们使用相同的格式，这个问题也就不会产生。

前端使用vscode+eslint+prettier就可以有效减少或者解决这个问题。

下面就vscode根据eslint+prettier 自动格式化，说一下我自己的配置及方式。

首先我们要在vscode中的“扩展”模块内安装eslint及prettier扩展工具

安装完成之后进入vscode左下角“管理”——“设置”，搜索框搜索“Default Formatter”

在下拉选项中修改成“prettier ”之后，点击“工作区”按钮，使该设置同时修改于工作区

在我们配置完成之后可能会遇到格式化冲突

这是由于eslint、prettier 侧重点不同，

eslint主要负责: 质量检查(例如使用了某个变量却忘记了定义)、风格检查

prettier主要负责: 风格检查, 没有质量检查

这个时候就需要我们手动去指定规则（使用eslint的还是prettier的）

第一种方式：

在项目下.eslintrc.js 文件中配置prettier

plugins: ["prettier"],

然后在指定了规则之后我们需要配置.prettierrc.js文件

{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 140,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
  ]
}

（这些只是prettier的一小部分配置项，具体可以参照prettier官网prettier.io/ ）

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

第二种方式：

直接在vscode中的settings.json文件中配置prettier

{
  // 缩进不使用tab，使用空格
  "prettier.useTabs": false,
  // 句尾添加分号
  "prettier.semi": true,
  // 使用单引号代替双引号
  "prettier.singleQuote": true,
  // 使用一些折行敏感型的渲染器（如GitHub、comment）按markdown文本样式进行折行
  "prettier.proseWrap": "preserve",
  //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  "prettier.arrowParens": "avoid",
  // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  "prettier.bracketSpacing": true,
}

个人使用的是第二种，一次解决！

有问题欢迎留言和评论，大家一起学习和探讨，本次分享到此结束，谢谢大家！