当前位置: 首页 > news >正文

前端项目vue3项目集成eslint@9.x跟prettier

tips: 这些涉及编辑器的修改不一定能及时生效,如果没有生效,可以试试重启编辑器窗口

编辑器集成

我的编辑器是vscode,需要安装这两个编辑器插件

eslint
prettier

我这个配置主要是通过eslint提供的配置cli命令生成,在里面加入了对prettier的支持。
eslint官方提供的命令,根据他的提供的选项一项一项选就可以了,我这里是生成的ts + vue的项目

npm init @eslint/config@latest

生成的最初代码

import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import { defineConfig } from "eslint/config";export default defineConfig([{ files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"], plugins: { js }, extends: ["js/recommended"] },{ files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"], languageOptions: { globals: globals.browser } },tseslint.configs.recommended,pluginVue.configs["flat/essential"],{ files: ["**/*.vue"], languageOptions: { parserOptions: { parser: tseslint.parser } } },
]);

我安装的项目中的插件

eslint-config-prettier (关闭 ESLint 中所有与 Prettier 冲突的​​格式化规则​​(如缩进、引号、分号等),避免重复检查和修复冲突)
eslint-plugin-prettier (将 Prettier 的格式化规则​​作为 ESLint 规则运行​​,使 Prettier 的格式问题通过 ESLint 报错,并支持 eslint --fix 自动修复)

.prettierc.json (prettier的格式化配置规则,放在项目根目录中)

{"printWidth": 150,"tabWidth": 2,"semi": false,"singleQuote": true,"trailingComma": "none","bracketSpacing": true,"bracketSameLine": true,"arrowParens": "always","endOfLine": "auto"
}

最终完整代码

import js from '@eslint/js'
import globals from 'globals'
import tseslint from 'typescript-eslint'
import pluginVue from 'eslint-plugin-vue'
import { defineConfig } from 'eslint/config'
import EslintConfigPrettier from 'eslint-config-prettier'
import pluginPrettierRecommended from 'eslint-plugin-prettier/recommended'export default defineConfig([{ files: ['**/*.{js,mjs,cjs,ts,mts,cts,vue}'], plugins: { js }, extends: ['js/recommended', pluginPrettierRecommended] },{files: ['**/*.{js,mjs,cjs,ts,mts,cts,vue}'],languageOptions: {globals: {...globals.browser,...globals.node}}},tseslint.configs.recommended,pluginVue.configs['flat/essential'],{ files: ['**/*.vue'], languageOptions: { parserOptions: { parser: tseslint.parser } } },{rules: {//	这条规则是说如果变量未被更改,则应用const声明,// 这里写出来的原因是只有ts文件有效,而vue文件中没有自动修复,我就在这里重写了,保证行为一致'prefer-const': ['error',{destructuring: 'any',ignoreReadBeforeAssign: false}],'vue/multi-word-component-names': 'off'}},EslintConfigPrettier
])
http://www.dtcms.com/a/272385.html

相关文章:

  • android TabLayout 标题栏切换 事件拦截
  • 【前端】jQuery动态加载CSS方法总结
  • 2025Datawhale AI夏令营第一期-(1)用AI预测新增用户
  • 01-RabbitMQ消息队列
  • ResolvableType 解密Java泛型反射
  • day01 - 数组part01
  • 【高等数学】第三章 微分中值定理与导数的应用——第二节 洛必达法则
  • 关闭实时防护
  • Qt Creator控件及其用途详细总结
  • LeetCode经典题解:49、字母异位词分组
  • 游戏开发问题记录
  • 数字孪生技术为UI前端赋能:实现产品设计的快速原型验证
  • 小程序开发平台,自主开发小程序源码系统,多端适配,带完整的部署教程
  • Day57
  • 从零开始搭建深度学习大厦系列-2.卷积神经网络基础(5-9)
  • Redis性能基准测试
  • 影刀 RPA:实时追踪网页变化,第一时间推送通知
  • 知微传感Lkam系列线扫轮廓仪SDK例程篇:设置工作逻辑
  • Ubuntu 20.04 下**安装 FFmpeg 5.1
  • TCP 保活(KeepAlive)机制详解
  • 汽车功能安全-软件集成和验证(Software Integration Verification)【验证方法用例导出方法输出物】10
  • Java入门之JDK下载和安装
  • Thrust库介绍与使用
  • 《汇编语言:基于X86处理器》第7章 整数运算(1)
  • 机器人接入AI的发展前景:从开发者视角看技术融合与生态构建
  • JavaScript中的Screen对象:你的屏幕“身份证”
  • 城市规则管理列表实现逻辑
  • 【Note】Linux Kernel 实时技术深入:详解 PREEMPT_RT 与 Xenomai
  • 【React】MQTT + useEventBus 实现MQTT长连接以及消息分发
  • 昇腾 k8s vnpu配置