当前位置: 代码迷 >> 综合 >> 整理前端统一格式化规范 eslint+editorconfig+prettierrc+vetur
  详细解决方案

整理前端统一格式化规范 eslint+editorconfig+prettierrc+vetur

热度:1   发布时间:2023-12-29 19:15:54.0

前言

多人开发中统一得代码风格和规范是必不可少得,以前很不喜欢用eslint,各种报错,但在团队中用eslint去规范代码行为是非常有必要得,不过就我个人而言,这一套格式化得规范往往在我们去新公司得时候项目就已经有团队leader或其他同事弄好了,对这具体得操作也没有去做过整理,半知半解得,这里下面就整理下,以vue为例,往往vue项目分两种 vue-cli2创建得项目记录下


eslint+editorconfig+prettierrc+vetur 介绍下这4个

  • eslint:代码检测工具
  • editorconfig:包含的内容比较少,主要是配置我们的编辑器,编写代码时的简单规则
  • prettierrc:专注于代码格式化的工具
  • vetur:代码高亮,也有格式化得作用,可以在设置–》扩展==》vuter 中选择 prettierrc

一.vue-cli2创建项目

vue init webpack name
在这里插入图片描述

  • 创建完毕后 我去app.vue保存后自动格式化(这可以去设置里面搜保存,有个保存后自动格式化勾上就行了),

问题:格式化于eslint冲突,比如需要使用单引号,末尾不能加“,” ,结尾不能有“;”
解决:1.要么去掉eslint得这些warning 。2.将这些警告得格式写入格式化规则

在这里插入图片描述
选择解决2:可以设置里搜分号(这里说下用户和工作区)把勾选去掉

用户:是编辑器层面得,只要用这个编辑器打开项目都适用
工作区:是项目层面得,会在根目录下新建一个.vscode=>setting.json,这是跟着项目走得
在这里插入图片描述

也可以在根目录下新建一个.prettierrc.json
在这里插入图片描述

  相关解决方案