背景

项目参与成员过多，代码风格不统一，导致代码片段五花八门，不方便预览和代码review。因此一个好的代码风格和格式化要求，在项目初期阶段至关重要。

🤡个人觉得代码能跑，格式化时别太多代码提交冲突，选一个用就行了。推荐Prettier吧，文章底部不是说Eslint妥协了么...

ESLint是用于检查和修复代码中的问题，如语法错误、潜在的错误、代码风格问题等。

Prettier指定代码格式化的规则，例如缩进、换行符、引号样式等。会根据这些规则自动格式化代码，以确保整个项目中的代码风格一致。它不会执行静态代码分析或对代码进行修复，仅用于格式化代码。

ESLint+Prettier配合使用，才能达到真正意义上的代码格式化。但是往往有ESLint的情况下，代码规范会更加严格，所以可以根据自身项目要求去配置。

安装扩展

前提需要在vscode中下载 ESLint,Prettier-Code formatter扩展插件

配置ESLint

sql 复制代码

npm install eslint --save-dev

初始化eslint,选择你要生成的模板等初始化信息，然后会生成.eslintrc.js文件。其中的具体校验内容和信息可以根据自身项目要求进行配置。

.eslintrc.js：ESLint是一款静态代码分析工具，用于检查和修复代码中的问题，如语法错误、潜在的错误、代码风格问题等。.eslintrc是用于配置ESLint的配置文件。你可以在该文件中指定ESLint的规则、插件、解析器等。ESLint会根据这些规则对代码进行静态分析，并根据规则定义的修复进行代码修复。

sql 复制代码

npx eslint --init

你也可以配置.eslintignore用来忽略一些需要跳过校验的文件

bash 复制代码

/build/
/config/
/dist/
# /*.js
**/router.js
/src/assets/

配置Prettier

插件获取配置文件有一个优先级：.prettierrc > .editorconfig > vscode默认配置

创建.prettierrc.json文件，内部可以自定义代码格式化样式风格。

json 复制代码

{
  "tabWidth": 2, // 缩进字节数
  "endOfLine": "auto", // 结尾是 \n \r \n\r auto
  "printWidth": 120, // 超过最大值换行
  "proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  "quoteProps": "as-needed", // 对象的 key 仅在必要时用引号
  "semi": true, // 句尾添加分号
  "singleQuote": true, // 使用单引号代替双引号
  "trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  "useTabs": false, // 缩进不使用tab，使用空格
  "arrowParens": "always", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  "bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  "eslintIntegration": true, // 使用eslint进行格式化校验
  "vueIndentScriptAndStyle": true // 是否缩进Vue文件中<script>和<style>标记内的代码。
}

配置vscode设置

通过在setting.json配置相关属性，来确定是否在保存时等情况下是否进行格式化或者eslint校验等，打开方式shift+ctrl+p。

json 复制代码

{  "editor.formatOnSave": true //保存时自动格式化代码 }

你可能会在一些项目中不想保存后对整个文件进行格式化，那你可以通过配置esbenp.prettier-vscode

json 复制代码

{
    "[javascript]": {
	"editor.defaultFormatter": "esbenp.prettier-vscode"
     }
}

前端vscode代码格式化统一

背景

安装扩展

配置ESLint

配置Prettier

配置vscode设置

可能对你有帮助