解决vue代码不规范而出现的问题:Eslint修复

这篇具有很好参考价值的文章主要介绍了解决vue代码不规范而出现的问题:Eslint修复。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

当我们刚创建一个vue项目,写代码时候,因为代码写的不规范会出很多问题,报很多错误,除了一个一个去修改他们,还有没有其他办法去解决他们呢?

这里介绍三种办法去统一解决:

方法一:每次运行npm run lint

package.json文件里有一个"lint":“vue-cli-service  lint”,每次写完代码,运行一下lint:npm run lint,会自动帮你修复,但是变量没有用,不会给你自动修复,需要你自己手动修复。

方法二:自动修复eslint(推荐)

(1)安装eslint插件,并启用;

(2)在【文件】=>【首选项】=>【设置】,找到setting.json,加上以下配置:

"editor.codeActionsOnSave":{
        "source.fixAll":ture
}

setting.json位置: 

vue eslint 自动修复,web前端开发,前端,javascript,vue.js,前端框架

配置完,当你每次写完代码ctrl+s保存以下就自动给你修复了。

但是这个方案跟你的vscode和eslint版本是息息相关的,所以会出现版本不适用问题,有时候就没用了。

方案三:暂时关掉eslint,等代码都写完了,最后运行一次 npm run lint(推荐)

创建一个vue.config.js文件,在文件中加上下面这句代码:

module.exports = {
    lintOnSave:false //暂时关闭代码格式检测
}

然后重启项目,直接运行:

npm run lint

代码不规范就被修复了。文章来源地址https://www.toymoban.com/news/detail-590873.html

到了这里,关于解决vue代码不规范而出现的问题:Eslint修复的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp+vite+vue3+ts配置eslint代码检查及prettier规范检查

    首先要知道eslint与prettier的区别,ESLint 是一个用于检测 JavaScript 代码中的错误和潜在问题的工具。它只关注你写的代码是否正确,不会管你代码的格式;Prettier 则是一个代码格式化工具,它旨在确保代码在缩进、空格、换行、引号和分号等格式化方面遵循一致的规则,在

    2024年03月16日
    浏览(54)
  • Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化

    我在这里直接是通过vite提供的默认模板来创建一个vue3 + ts的项目。这里可以cmd,然后npm -v来查看版本。 这样一个vue3 + ts的项目就创建好了,使用vscode打开该项目,然后执行 yarn 安装依赖 依赖安装完成后,执行   yarn dev  启动项目就可以在浏览器中正常访问了。   初始化

    2024年01月24日
    浏览(63)
  • vite 创建vue3项目,使用 Prettier 统一格式化代码,集成 ESLint、Stylelint 代码校验规范

    在团队开发中,保持代码风格的一致性和代码质量的高度,对于项目的可维护性和可读性非常重要。为了实现这一目标,我们可以使用工具来自动格式化代码并进行代码校验,在开发过程中捕获潜在的问题,并提供修复建议。 本示例中,我们将使用 Vite 来创建一个新的 Vue

    2024年04月28日
    浏览(48)
  • 【vue3-element-admin】ESLint+Prettier+Stylelint+EditorConfig 约束和统一前端代码规范

    本文介绍 vue3-element-admin 如何通过ESLint 检测 JS/TS 代码、Prettier 格式化代码、Stylelint 检测 CSS/SCSS 代码和配置 EditorConfig 来全方位约束和统一前端代码规范。 ESLint 可组装的JavaScript和JSX检查工具,目标是保证代码的一致性和避免错误。 安装 ESLint 插件 VSCode 插件市场搜索 ESLint 插

    2023年04月17日
    浏览(64)
  • Vue项目中代码规范(Prettier + ESLint)

    P r e t t i e r 用于统一代码格式,它主要关注代码外观,例如缩进、换行、引号等 Prettier用于统一代码格式,它主要关注代码外观,例如缩进、换行、引号等 P re tt i er 用于统一代码格式,它主要关注代码外观,例如缩进、换行、引号等 E S L i n t 用于代码质量和规范,它主要可

    2024年02月04日
    浏览(32)
  • 代码提交规范-ESLint+Prettier+husky+Commitlint

    先看下思维导图分析 装包配置.eslintrc.js 配置忽略文件 运行 详细讲解 以react 项目为例 配置文件 eslintrc文件 根目录/.eslintrc.js 设置忽略文件 .eslintignore 主要步骤 配置perttier 配置忽略文件 处理eslint的冲突 配置vscode的setting.json 配置.prettierrc.js文件 判断是否生效直接使用命令 n

    2024年02月04日
    浏览(52)
  • vscode的eslint配置保存自动修复代码

    提示:本文展示了vue项目中配置eslint,在vscode编辑器中保存后可以自动修复 本次配置达到的效果:vue代码格式有问题会根据插件的eslint规则红色波浪线提示、ctrl+s保存后根据波浪线的规则进行代码修复(包括自动删除尾部逗号等) vue项目配置eslint,vscode下载的eslint插件,与

    2024年02月10日
    浏览(31)
  • ❤ Vue使用Eslint检测报错问题和解决

    关闭ESLint语法检测即可:具体步骤如下: 第一步我们打开setting设置: 打开左上角的file,然后点击setting 接下来进入setting以后我们来看下面操作: eol-last 在–fix命令行上的选项可以自动修复一些被这条规则反映的问题。 在非空文件中跟踪换行符是一种常见的 UNIX 习惯用法。

    2024年02月11日
    浏览(32)
  • Vue项目 -- 解决Eslint导致的console报错问题

    在利用vue-cli3+构建的项目中引入eslint进行语法检查时,使用console.log(‘xxx’)时,控制台抛出了Unexpected console statement (no-console) 异常, 例:一使用console就提示报错 解决办法是: 在 .eslintrc.js 文件中写入以下内容:

    2024年02月08日
    浏览(26)
  • vscode使用eslint及prettier配合解决代码格式问题

    esLint是提供一个插件化的javascript代码检测工具。 esLint 配置文件遵循 commonJS 的导出规则,所导出的对象是 eslint 的配置对象。 1、打开vscode 在插件选项中找到对应插件进行安装即可。 2、新建一个.prettierrc文件 在该文件下,写入一下代码 3、设置vscode保存代码时,让代码符合

    2024年02月02日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包