【ESLint】Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南

最新推荐文章于 2024-08-16 09:31:50 发布
置顶 最新推荐文章于 2024-08-16 09:31:50 发布
阅读量4k 收藏 26
点赞数 26
分类专栏： vite vue2.0 Vue3.0 文章标签： vue typescript javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tangkebo/article/details/123270936
版权
vue2.0 同时被 3 个专栏收录
14 篇文章 0 订阅
订阅专栏
Vue3.0
3 篇文章 0 订阅
订阅专栏
vite
1 篇文章 0 订阅
订阅专栏

Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南

因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码，但是随着接手的项目越来越多，需要统一每个项目的代码规范，于是在此分享vue项目的几种代码格式化风格(default,standard,airbnb,prettier)的基本区别以及修改为prettier风格。

对比肉眼可见的格式化风格差异，并且以字符串单/双引号，每行结尾有无分号，object对象最后一项有无尾逗号作为判断依据

VSCode的插件以及配置

  • ESLint , Prettier 插件安装

  • 配置VSCode settings.json

  ...
  // 相应文件的格式化工具选中
	"[vue]": {
	  "editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[jsonc]": {
		"editor.formatOnSave": true,
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[json]": {
		"editor.formatOnSave": true,
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[css]": {
		"editor.formatOnSave": true,
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[scss]": {
		"editor.formatOnSave": true,
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[typescript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[javascript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[javascriptreact]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[html]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
  // 启用ESLint作为已验证文件的格式化程序，可方便快捷键
  "eslint.format.enable": true, 
  // 每次保存的时候将代码按eslint格式进行修复
  "editor.codeActionsOnSave": {
		"source.fixAll.eslint": true
	},
  // 关闭编辑器默认保存格式化，不然多数情况会和上面的配置执行两次
  "editor.formatOnSave": false
  ...
1. 【 Default 】 vue/cli 创建默认配置项目
  1. 运行以下命令来创建一个新项目：
    vue create hello-world
  2. 选择 Default ([Vue 2] babel, eslint) 回车创建
    avatar

等着创建成功后,会发现 eslint 的相关配置，在package.json文件中：

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },

这里我们删除它，并在项目下新建.eslintrc.js文件将其迁移进去：

module.exports = {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  }

plugin:vue/essential：启用 vue 的基础规则
eslint:recommended：启用 eslint 的推荐规则

babel-eslint：可以对所有有效的babel代码进行lint处理。

此时我们可以根据当前项目中main.js文件发现，最基本的风格为：字符串单引号，结尾无分号；当我们结尾加分号，保存测试会没有任何效果，不要急，接下来添加 prettier 。

vue/cli 添加 prettier

运行以下命令：
vue add @vue/eslint

提示 Still proceed 选择 y
等待安装完
会出现四个格式化风格选择项，按向下键，选择 Prettier 回车确认
再选择 Lint on save 回车确认

等 @vue/cli-plugin-eslint 安装完成后会发现 .eslintrc 配置中 extends 多出了@vue/prettier

回过头来，再去项目的main.js或者App.vue文件保存测试发现格式化生效。

最后，去除一些常规的eslint 报错警告信息，在 rules 中添加自定义规则：

其中 “prettier/prettier” 可以添加 prettier 相关配置

.eslintrc.js 完整配置

module.exports = {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended",
    "@vue/prettier"
  ],
  "parserOptions": {
    "parser": "babel-eslint"
  },
  "rules": {
    'prettier/prettier': [
			'error',
			{
				requireConfig: false,
				endOfLine: 'auto',
				quoteProps: 'as-needed',
				proseWrap: 'preserve',
				arrowParens: 'always',
				htmlWhitespaceSensitivity: 'strict',
				ignorePath: '.prettierignore',
				jsxBracketSameLine: false,
				jsxSingleQuote: false,
				vueIndentScriptAndStyle: true,
				semi: false,
				trailingComma: 'none',
				singleQuote: true,
				printWidth: 150,
				tabWidth: 2,
				bracketSpacing: true,
				useTabs: true
			}
		],
		'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
		'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
		'vue/v-on-event-hyphenation': 'off',
		'vue/multi-word-component-names': ['off'],
		'vue/prop-name-casing': 'off',
		'vue/require-default-prop': 'off',
		'vue/no-v-html': 'off',
		'no-new': 'off',
		'prefer-regex-literals': 'off',
		'prefer-promise-reject-errors': 'off',
		'no-unused-vars': [
			'off',
			{
				caughtErrors: 'none'
			}
		],
		'vue/no-unused-vars': [
			'off',
			{
				caughtErrors: 'none'
			}
		],
		'no-tabs': 'off',
		'no-trailing-spaces': 'off',
		'no-mixed-spaces-and-tabs': 'off',
		'no-empty-function': 'off',
		'space-before-function-paren': ['off', 'always'],
		'no-unreachable-loop': 'off',
		'no-multiple-empty-lines': 'off',
		'no-loss-of-precision': 'off',
		'no-useless-escape': 0,
		semi: ['warn', 'never'],
		eqeqeq: 0,
		indent: ['off', 2],
		quotes: ['error', 'single', { allowTemplateLiterals: true }]
  }
}
2. 【 Manually 】 vue/cli 自定义创建 ESLint + Prettier
  1. 运行以下命令来创建一个新项目：
    vue create hello-world
  2. Please pick a preset: 选择 Manually select features
  3. Check the features needed for your project: Choose Vue version, Babel, Linter…
  4. Choose a version of Vue.js that you want to start the project with 2.x
  5. Pick a linter / formatter config: Prettier
  6. Pick additional lint features: Lint on save
  7. Where do you prefer placing config for Babel, ESLint, etc.?: In dedicated config files
  8. Save this as a preset for future projects? Yes
  9. Save preset as: 回车确认

可见差异：字符串双引号，每行结尾有分号，object对象最后一项有尾逗号;

生成的.eslintrc.js 中 extends: [“plugin:vue/essential”, “eslint:recommended”, “@vue/prettier”]

跟上面 [1. 【 Default 】 vue/cli 创建默认配置项目] 创建的.eslintrc.js 配置对比发现，只是少了 rules 配置，将上面的 rules 配置copy过来。同样测试保存格式化效果一样。

3. 【 Manually 】 vue/cli 自定义创建 ESLint + Standard
  1. 运行以下命令来创建一个新项目：

vue create hello-world

  1. Please pick a preset: Manually select features
  2. Check the features needed for your project: Choose Vue version, Babel, Linter
  3. Choose a version of Vue.js that you want to start the project with 2.x
  4. Pick a linter / formatter config: Standard
  5. Pick additional lint features: Lint on save
  6. Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
  7. Save this as a preset for future projects? Yes
  8. Save preset as:回车确认

可见差异：字符串单引号，每行结尾无分号，对象最后一项没有尾逗号;

生成的.eslintrc.js 中 extends: [“plugin:vue/essential”, “@vue/standard”]

关于.eslintrc.js配置，去掉 rules 中的 ‘prettier/prettier’ ，rules其他配置同上，同样测试保存格式化效果一样。

4. 【 Manually 】 vue/cli 自定义创建 ESLint + Airbnb
  1. 运行以下命令来创建一个新项目：

vue create hello-world

  1. Please pick a preset: Manually select features
  2. Check the features needed for your project: Choose Vue version, Babel, Linter
  3. Choose a version of Vue.js that you want to start the project with 2.x
  4. Pick a linter / formatter config: Airbnb
  5. Pick additional lint features: Lint on save
  6. Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
  7. Save this as a preset for future projects? Yes
  8. Save preset as:回车确认

可见差异：字符串单引号，每行结尾有分号，对象最后一项有尾逗号;

生成的.eslintrc.js 中 extends: [“plugin:vue/essential”, “@vue/airbnb”]

关于.eslintrc.js配置，rules其他配置同上，同样测试保存格式化效果基本一致一样。

5. vite 自定义创建默认Vue项目

1. 运行以下命令来创建一个新项目：

npm init vite@latest my-vue-app --template vue

2. 安装 vue3 ESLint + Prettier 相关依赖

npm install eslint-config-tkb -D

然后在package.json 中新添加配置即可：

"eslintConfig": {
	"extends": ["eslint-config-tkb"]
}

进入vue和js 文件保存，测试格式化效果基本一致一样。

eslint-config-tkb 是个人自定义的 eslESLint + Prettier 的配置，也支持vite创建的 vue-ts创建的模板项目。

tang丶有年
关注
专栏目录
Vite+Vue3项目集成ESLint+Prettier+Stylelint+Husky让项目规范起来
Web_boom的博客
01-16 1890
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
vue+ESLint 配置保存 自动格式化代码
11-21
1. 在.eslintrc.js 添加 vscode 终端启动服务 // 添加⾃定义规则 'prettier/prettier': [ // eslint校验不成功后，error或2则报错，warn或1则警告，off或0则⽆提示 'error', { singleQuote: true, semi: false, //结束是否加分号 printWidth: 160//每行最长字符 } ] 2.打开VS code 文件》首选项》设置》扩展》ESLint》 // eslint格式化字符串 "editor.codeActionsOnSave": { "
Eslint:已有vue2项目添加eslint自动格式化，Eslint (standard)+ Husky + Lint-staged+prettier
weixin_43239880的博客
04-20 4337
已有vue2项目添加eslint自动格式化，Eslint (standard)+ Husky + Lint-staged+prettier
Vue Airbnb 风格日期选择器使用教程
最新发布
gitblog_00777的博客
08-16 399
Vue Airbnb 风格日期选择器使用教程 vue-airbnb-style-datepickerA VueJs datepicker with a similar look and functionality as the popular AirBnb datepicker.项目地址:https://gitcode.com/gh_mirrors/vu/vue-airbnb-style-dat...
vue2项目如何在运行时通过prettier格式化代码
qq_41292756的博客
08-18 325
老vue2项目由于之前没有使用eslint和prettier进行代码检查和格式化，随着开发人员增加，每个开发人员使用的编辑器不同、格式化插件不同，提交代码时候老会冲突，调研了几个方案，具体如下：
vscode中vue代码格式相关设置,(个人观点)
github_66624340的博客
05-26 3130
设置完在文件夹中新建xxx.vue,打开后在第一行写vue就可以快速生成 效果如下: 设置: 点击左下角的设置,选择设置在设置中搜索tab size,设置成2,这样tab就改为默认的2个空格 生成代码格式设置: 点击用户代码片段 选择下面的vue.json(vue) 把下面的代码复制到其中 { "Print to console": { "prefix": "vue" , "body": [ "<template>" ...
vue项目的创建命令选取&ESLint的安装命令选取
qq_45426187的博客
02-27 832
6.Pick a linter/formatter config 选择 ESLint + Prettier(最下面的)target:'http://localhost:8081', //代理目标的基础路径 真实请求路径。config.headers.Authorization = token // 设置请求头。//匹配所有以 '/api'开头的请求路径。2.等待跳出选项, 选择 //手动选择功能。
详解如何在vue项目中使用eslint+prettier格式化代码
10-17
本文将详细讲解如何在Vue项目中集成`eslint`和`prettier`，以实现代码的自动格式化和规范检查。 `eslint`是一款强大的静态代码分析工具，它可以检查代码中的错误、潜在问题，并且支持自定义规则来符合特定的编码...
Vue-cli Eslint在vscode里代码自动格式化的方法
08-27
总的来说，通过集成 Eslint 和 Vetur，并正确配置 VS Code 的设置，我们可以实现 Vue CLI 项目在 VS Code 中的代码自动格式化。这不仅有助于保持代码整洁，也有利于团队成员之间的代码一致性，从而提升开发质量和...
Nuxt项目支持eslint+pritter+typescript的实现
10-16
与eslint类似，prettier也可以在编辑器中集成，通过安装prettier的VS Code插件，并在`.vscode/settings.json`中进行配置，可以开启`editor.formatOnSave`选项来使prettier在每次保存文件时自动格式化代码。...
vue cli3 + eslint配置和保存代码自动格式化
m0_37613019的博客
08-07 4433
什么是eslint 什么是ESLint？ eslint 是js和jsx的静态代码检测工具，在代码未运行的时候即可检测代码中是否存在错误或不规范的写法。 配置方式 eslint官方文档–高级配置 eslint使用指南 方式一：Configuration Comments - 使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中。 比如要让代码中的某些代码断忽略eslint监测可以使用eslint-disable。可以用eslint-enable 开启代码检测。 /* eslint-disa
vue用命令批量解决ESLint警告
huihuiliu_的博客
10-18 1991
在vue里使用了eslint之后，代码不规范就会报很多警告的错误，也会提示红色下划线，一个一个的改，工作量太大，这样就很让人头疼，下面讲一下怎么批量去解决这些由于eslint代码不规范引起的错误警告 步骤如下： 1、打开package.json，在script里找到 修改为：（中间插入–fix） “lint”: “eslint --fix --ext .js,.vue src test/un...
webpack4+vue3.0+element-plus创建基于vue3的项目
Mr_XiMu的博客
01-15 3816
webpack4+vue3.0+element-plus创建基于vue3的项目
vue项目搭建
qq_32586679的博客
12-01 328
1.node.js安装: node -v 查看版本 2.vue-cli安装: 低版本先移除，再全局安装新版本 vue -V(版本) 3.版本初始化： vue create name 4.选择初始化配置： Default是自动安装，Manually是手动安装 5.添加配置项： *Babel：使用babel，便于将我们源代码进行转码（把es6=>es5） ...
lintOnsave
2301_79658787的博客
04-01 179
/ page 的入口。
2021-07-07 Eslint 报错问题 ，已解决！
JZQSLJ的博客
07-07 1687
Eslint 报错问题 ，已解决！ 最近在用vue 框架，经常会出现eslint 报错问题，以此记录问题解决。 eslintrc.Js文件修改 //**添加 'space-before-function-paren': 0,'indent': 'off',** rules: { 'space-before-function-paren': 0, 'indent': 'off', // allow async-await 'generator-star-spacing'
vue 插件ESLint报错解决方法（持续整理）
热门推荐
lgdaren的博客
03-26 1万+
{ root: true, // 当前配置为根配置，将不再从上级文件夹查找配置 parserOptions: { parser: ‘babel-eslint’, // 采用 babel-eslint 作为语法解析器 sourceType: ‘module’, // 指定来源的类型，有两种script或module ecmaVersion: 6, //指定ECMAScript支持的版本，6为ES6 }, env: { browser: true, // 设置为所需检查的代码是在浏览器环境运行的 es6
eslint报错[eslint] Failed to load config “@vue/airbnb“ to extend from. 解决方案
kust2022byf的博客
05-08 1875
ESLint是一款代码开发工具,能够协调和统一团队的编码风格.刚开始接触ESLint的开发者,使用时会感觉处处受挫.ESLint的本质就是提供规范,制定条条框框去限制开发者的编码.比如ESLint里定义的这样的规则,代码缩进只能用2个空格,如果你用4个空格就会报错.只需要在vue项目中vue.config.js的配置文件中添加module.= { lintOnSave: false }即可。但是由于限制太过于严格，很多开发人员无法适应。
前端洁癖者指南：用VSCode与eslint美化vue项目
需要在项目的`.eslintrc.js`或相应的配置文件中扩展配置，添加`"extends": ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"]`，这样可以使ESLint结合Prettier来执行更严格的代码风格检查和自动格式...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值