使用Vue-cli的时候出现的自动化格式与ESlint格式不匹配问题

最新推荐文章于 2024-06-10 15:05:54 发布
最新推荐文章于 2024-06-10 15:05:54 发布
阅读量540 收藏 1
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/pepsi77/article/details/112207994
版权
在使用Vue-cli进行开发时遇到一个问题，即VScode自动格式化的代码与ESlint规则不符，例如多余逗号、分号以及引号类型。尽管尝试修改VScode设置，但问题仍未解决。最终发现是由于项目内存在.editorconfig文件导致本地配置优先级高于VScode全局设置。删除此文件后，VScode的默认设置开始生效，解决了格式化冲突。此外，可以通过打开VScode的设置并添加特定代码来进一步定制格式化规则。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题描述：在学习Vue开发的时候，每次保存vscode都会帮我自动格式化代码，但是不符合ESlint的标准，比如会在最后添加逗号，句末会添加分号，单引号会变成双引号。
网上给出的结果都是修改设置中的setting，但是只修改setting仍然不会发生改变。

解决方法：
VScode里的设置不生效，是因为项目本地有.editorconfig文件，只要删除这个文件，系统自带的设置就会生效了

附：在vscode左上角的文件->首选项->设置 中 点击右上角的小笔记本图标
在这里插入图片描述
然后添加如下代码：

// vscode默认启用了根据文件类型自动设置tabsize的选项
   "editor.detectIndentation": false,
   // 重新设定tabsize
   "editor.tabSize": 2
最低0.47元/天 解锁文章
pepsi77
关注
解决vue-cli 中eslintrc与格式化语法工具冲突警告问题
小林先生的博客
01-15 818
解决vue-cli 中eslintrc与格式化语法工具冲突警告问题 1.在根目录下创建.prettierrc文件 2.输入 （下列代码） { "semi" : false, "singleQuote": true } 二. 补充 无语法错误报错问题 复制可视化面板中对应的错误的语法规则 2.找到.eslintrc.js文件 3.找到 rules 字段 4.将刚刚复...
脚手架vue-cli及webpack
炑焽的博客
04-25 808
上一章我们学习了组件的使用，这一章讲解怎么使用vue cli脚手架的安装和使用。
vscode自动格式化不符合eslint_vscode 格式化代码 与 eslint 有冲突的问题解决
weixin_33369252的博客
01-13 911
项目中配置了eslint后，在使用vue界面里格式化的时候总是不一致。然后在配置中加了配置也无效(File - Preference - Setting)查了下原因是在vue开发的时候我们一般都安装了Vetur的插件来对.vue格式的文件进行处理，Vetur自带了格式化，规范就是使用prettier这时候装prettier插件，并且在设置或setting.json里配置了prettier的话是无效...
解决使用vue-cli搭建的项目出现的ESLint错误
高贵的程序媛
11-16 734
问题原因：Vue对语法的严格限制 找到 build 文件夹下的 wwebpack.base.conf.js，注释以下代码：
vue3+ts eslint报错版本不符合的问题
w211312343的博客
11-15 731
还有一个类似的解决方案，就是在里安装插件的命令后面加上。：npm 配置集旧版-对等-对等值设置为 true。然后 npm i 即可。
使用ESLint插件不生效，版本原因
weixin_52183312的博客
02-26 2750
安装ESLint插件后，在配置默认格式化程序时，没有ESLint这个选项。
vue-cli是什么？和 webpack是什么关系？
炑焽的博客
06-10 2344
Vue CLI是Vue.js项目的官方脚手架，基于Node.js与Webpack构建。安装Vue CLI前需确保Node.js已安装，随后通过npm全局安装。Vue CLI能迅速创建和管理Vue.js项目，提升开发效率。而Webpack则负责资源打包，通过配置文件管理依赖、插件等，优化代码并分割资源，提高项目性能。Vue CLI与Webpack的完美结合，让开发者更专注于业务逻辑，轻松构建高效、稳定的Vue.js应用。
vue-cli购物商城
01-18
Vue CLI提供了快速初始化项目、自动化构建、热重载、代码分割等特性，极大地提高了开发效率。在`vue-cli3`版本中，引入了更先进的配置选项和插件系统，使得项目设置更加灵活。 1. 创建项目：通过运行`vue create ...
airbnb与eslint版本 和 node版本不匹配问题解决记录
许珊珊同学的专栏
05-17 2666
eslint版本 和 node版本不匹配， npm info “eslint-config-airbnb-base@14.2.1” peerDependencies // 返回结果 { eslint: ‘^5.16.0 || ^6.8.0 || ^7.2.0’, ‘eslint-plugin-import’: ‘^2.22.1’ } 把eslint和其他相关依赖升级到指定版本 代码层面运行：eslint --配置 参数 编辑器层面：安装eslint相关插件，并启用 ...
项目中react与eslint包不匹配
coco723的博客
05-26 511
背景 在启动老项目的时候，出现了warning的信息，当然不影响正常使用，但是作为“强迫症”患者，还是忍不住查看原因及解决方案 定位原因 报错信息比较清晰了，react与eslint-plugin-react包版本不匹配，接下来就可以针对具体问题，查找解决方案了 解决方案 https://github.com/yannickcr/eslint-plugin-react/issues/2157参考了该issue 在.eslintrc文件中添加如下配置信息 "settings": { "react"
vue中设置eslint 保存自动修正代码格式不规范（单双引号 空格等
Lenny-zlp的博客
12-15 1618
安装插件ESLint 文件 — 首选项 — 设置 — 在settings.json 中添加以下代码即可 可能会出现没效果现象 升级vscode "editor.codeActionsOnSave": { "source.fixAll": true }, 或者 在项目中创建 vue.config.js 通过关闭eslint 完成项目后 在命令输入 npm run lint 来修正代码格式不规范 关闭eslint module.exports = { lintOnS.
vue-cli4.x创建 vue项目 引入 ESLint 配置文件的不同
莘栀的博客
02-13 799
ESLint Standard生成配置文件 module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/essential', '@vue/standard' ], parserOptions: { parser: 'babel-eslint' }, rules: { 'no-console': process.env.NODE_ENV === '
❤ npm Eslint 报错
林太白
02-01 2734
它告诉 NPM 忽略项目中引入的各个modules之间的相同modules但不同版本的问题并继续安装，保证各个引入的依赖之间对自身所使用的不同版本modules共存。运行完后会生成一个 package-lock.json 的文件，该文件主要作用就是锁定安装包的版本号，以确保项目其他成员在npm install时大家的依赖一致。–legacy-peer-deps：安装时忽略所有peerDependencies，忽视依赖冲突，采用npm版本4到版本6的样式去安装依赖，已有的依赖不会覆盖。
ESLint 和 Prettier 的校验规则有冲突时怎么解决
weixin_43040026的博客
11-02 575
ESLint 和 Prettier 的校验规则有冲突时怎么解决
vue项目代码格式不统一怎么办？一招教你解决
eclipse1024的博客
07-21 2690
vue项目代码格式不统一怎么办？一招教你解决
decimal格式化成字符串_Vue项目接入Eslint+Prettier+Husky格式化代码
weixin_34434736的博客
12-28 290
简介前端项目，主要有两种选择ESLint和TSLint。TSLint仅针对TS代码，因此如果采用TSLint规范TS代码，JS代码需要采用其他工具。而ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由于性能问题，TypeScript 官方决定全面采用ESLint。Eslint的主要功能包含代码格式的校验，代码质量的校验，JS规范，如用===而不是==判断相等、用驼峰命名变量而...
Eslint配置-保存时代码自动格式化
qq_40926485的博客
08-11 249
vscode 中使用eslint 保存时代码自动格式化 vscode 设置中搜索找到setting.json 然后添加 代码 "eslint.codeAction.showDocumentation": { "enable": true }, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, ...
vscode保存时自动代码格式化eslint(针对vue)
weixin_60505218的博客
05-16 2904
以上就是全部设置过程，如有不妥，望沟通交流。OK，设置完毕啦，赶紧去试试吧~
serve":"vue-cli-service serve" "build":"vue-cli-service build" l""lint":"vue-cli-service lint"
最新发布
01-13
### Vue CLI Service 命令配置及用法 #### 配置 `package.json` 中的脚本命令 在 `package.json` 文件中的 `"scripts"` 字段可以定义各种自定义命令来简化开发流程。对于基于 Vue CLI 的项目，默认情况下会存在几个常用的命令： - **启动本地服务器 (`serve`)** 当执行 `npm run serve` 或者更直接地通过 `vue-cli-service serve` 启动应用时，这实际上是在调用位于 `node_modules/@vue/cli-service/bin/vue-cli-service.js` 脚本[^2]。 此操作将会读取并解析 `.env`, `.env.local`, `.env.[mode]`, 和 `.env.[mode].local` 环境变量文件，并根据当前模式加载相应的环境设置[^4]。 - **构建生产版本 (`build`)** 构建用于生产的优化过的静态资源可以通过运行 `npm run build` 来完成，其背后也是由 `vue-cli-service build` 执行。此过程同样遵循特定顺序查找和处理环境配置文件以确保正确的编译选项被应用于最终产物中[^3]。 - **代码风格检查 (`lint`)** 使用 ESLint 对整个项目进行语法和样式上的校验可通过 `npm run lint` 完成，即调用了 `vue-cli-service lint` 方法来进行自动化检测工作。该功能有助于保持团队内部编码标准的一致性和提高可维护性。 #### 自定义命令名称 值得注意的是，在上述例子中提到的服务名如 `serve`、`build` 并不是固定的；开发者可以根据个人喜好更改这些名字而不影响实际逻辑——只需同步更新 `package.json` 内部相应条目即可实现重命名效果。例如改为 `myserve` 或 `mybuild` 后，则应分别使用 `npm run myserve` 及 `npm run mybuild` 来触发对应行为。 ```json { "scripts": { "myserve": "vue-cli-service serve", "mybuild": "vue-cli-service build" } } ``` #### 处理多环境下的差异 为了适应不同的部署场景（比如开发版 vs 生产版），Vue CLI 提供了一套灵活机制允许创建多个环境配置文件。通常会在根目录下见到类似 `.env.production` 或 `.env.development` 这样的文件用来指定不同环境下特有的参数值。当执行像 `vue-cli-service build --mode production` 这样带有显式模式标志的操作时，系统就会优先考虑匹配给定模式的相关设定项。 ```bash # 开发环境中启动服务 vue-cli-service serve --mode development # 生产环境中打包发布 vue-cli-service build --mode production ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值