vue重修之自定义项目、ESLint和代码规范修复

这篇具有很好参考价值的文章主要介绍了vue重修之自定义项目、ESLint和代码规范修复。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

VueCli 自定义创建项目

vue重修之自定义项目、ESLint和代码规范修复,# Vue学习,vue.js,代码规范,前端

  1. 安装脚手架 (已安装)
npm i @vue/cli -g
  1. 创建项目

    vue create xxx
    
    • 选项
    Vue CLI v5.0.8
    ? Please pick a preset:
      Default ([Vue 3] babel, eslint)
      Default ([Vue 2] babel, eslint)
    > Manually select features     选自定义
    
    • 手动选择功能
      vue重修之自定义项目、ESLint和代码规范修复,# Vue学习,vue.js,代码规范,前端
  • 选择vue的版本
    vue重修之自定义项目、ESLint和代码规范修复,# Vue学习,vue.js,代码规范,前端
  • 是否使用history模式
    vue重修之自定义项目、ESLint和代码规范修复,# Vue学习,vue.js,代码规范,前端
  • 选择css预处理
    vue重修之自定义项目、ESLint和代码规范修复,# Vue学习,vue.js,代码规范,前端
  • 选择eslint的风格 (eslint 代码规范的检验工具,检验代码是否符合规范)
    vue重修之自定义项目、ESLint和代码规范修复,# Vue学习,vue.js,代码规范,前端
  • 选择校验的时机 (直接回车)
    vue重修之自定义项目、ESLint和代码规范修复,# Vue学习,vue.js,代码规范,前端
  • 选择配置文件的生成方式 (直接回车)
    vue重修之自定义项目、ESLint和代码规范修复,# Vue学习,vue.js,代码规范,前端
  • 是否保存预设,下次直接使用? => 不保存,输入 N
    vue重修之自定义项目、ESLint和代码规范修复,# Vue学习,vue.js,代码规范,前端
  • 启动项目
    npm run serve
    

ESlint代码规范及手动修复

  • [JavaScript Standard Style 规范说明] (https://standardjs.com/rules-zhcn.html)
  • 代码规范:一套写代码的约定规则.

代码规范错误

  • 如果代码不符合 standard 的要求,ESlint 会有提示
    vue重修之自定义项目、ESLint和代码规范修复,# Vue学习,vue.js,代码规范,前端
  • 两种解决方案:
    1. 手动修正
    • 根据错误提示来一项一项手动修改纠正。
    • 如果你不认识命令行中的语法报错是,根据错误代码去百度或者ESLint规则表中查找其具体含义。
    1. 自动修正
    • 基于 vscode 插件 ESLint 高亮错误,并通过配置 自动 帮助我们修复错误。

vue重修之自定义项目、ESLint和代码规范修复,# Vue学习,vue.js,代码规范,前端文章来源地址https://www.toymoban.com/news/detail-732829.html

  • 配置
    // 当保存的时候,eslint自动帮我们修复错误
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 保存代码,不自动格式化
    "editor.formatOnSave": false
    
  • 注意:eslint的配置文件必须在根目录下,这个插件才能才能生效。打开项目必须以根目录打开,一次打开一个项目
  • settings.json 参考
    {
        "window.zoomLevel": 2,
        "workbench.iconTheme": "vscode-icons",
        "editor.tabSize": 2,
        "emmet.triggerExpansionOnTab": true,
        // 当保存的时候,eslint自动帮我们修复错误
        "editor.codeActionsOnSave": {
            "source.fixAll": true
        },
        // 保存代码,不自动格式化
        "editor.formatOnSave": false
    }
    

到了这里,关于vue重修之自定义项目、ESLint和代码规范修复的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vite 创建vue3项目,使用 Prettier 统一格式化代码,集成 ESLint、Stylelint 代码校验规范

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

    2024年04月28日
    浏览(60)
  • 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日
    浏览(40)
  • React 项目配置代码提交规范 ESLint、Pretttier、Husky、CommitLint

    React 项目配置代码提交规范 ESLint、Pretttier、Husky、CommitLint 前言 团队开发的成员越来越多,项目都是由多个人进行开发和维护,每个人的代码书写习惯和风格又不尽相同,commit 的提交log 也是乱七八糟,为以后的开发和维护增添了很多困难,所以规范和约束在多人协作下,就

    2024年04月15日
    浏览(52)
  • uniapp+vite+vue3+ts配置eslint代码检查及prettier规范检查

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

    2024年03月16日
    浏览(66)
  • 从0搭建Vue3组件库(十一): 集成项目的编程规范工具链(ESlint+Prettier+Stylelint)

    欲先善其事,必先利其器。一个好的项目是必须要有一个统一的规范,比如代码规范,样式规范以及代码提交规范等。统一的代码规范旨在增强团队开发协作、提高代码质量和打造开发基石,所以每个人必须严格遵守。 本篇文章将引入 ESLint+Prettier+Stylelint 来对代码规范化。 ESLint

    2024年02月02日
    浏览(43)
  • 【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日
    浏览(84)
  • vue-cli自定义创建项目-eslint依赖冲突解决方式

    创建项目步骤 概览: 在安装 npm安装时会报错 依赖冲突原因: @vue/eslint-config-standard@6.1.0 依赖于 eslint-plugin-vue 的 ^7.0.0 版本,但是项目中安装了更高版本的 eslint-plugin-vue 解决方式:降级eslint-plugin-vue到@vue/eslint-config-standard支持的版本 解决后: 再进行npm安装,就能成功

    2024年04月09日
    浏览(52)
  • vue3项目 - Eslint 配置代码风格

    总结: Prettier   (代码规范的插件,格式化 )--- 美观 Eslint   (规范、纠错、检验错误 )----- 纠错 首先, 禁用 Prettier 插件,安装 ESLint 插件,配置保存时自动修复 再 配置代码风格文件 .eslintrc.cjs (Prettier 配置 + ESLint 配置, 附配置代码 ) 配置内容 如, Prettier:单引号、

    2024年02月04日
    浏览(42)
  • 【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint

    package.json中 vite后面加上 --open 回答问题如下: 使用eslint仅检查语法,还是检查语法及错误,选第二个 使用的是什么模块,选第一个 项目使用的是什么框架,选vue 项目中使用TyoeScript ,选yes 项目运行在哪,选浏览器 创建的配置类型需要什么类型的,选Javascript 需要安装这些

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

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

    2024年02月04日
    浏览(60)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包