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

文章目录

VueCli 自定义创建项目

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

    bash 复制代码
    vue create xxx
    • 选项
    js 复制代码
    Vue CLI v5.0.8
    ? Please pick a preset:
      Default ([Vue 3] babel, eslint)
      Default ([Vue 2] babel, eslint)
    > Manually select features     选自定义
    • 手动选择功能
  • 选择vue的版本
  • 是否使用history模式

  • 选择css预处理

  • 选择eslint的风格 (eslint 代码规范的检验工具,检验代码是否符合规范)

  • 选择校验的时机 (直接回车)

  • 选择配置文件的生成方式 (直接回车)

  • 是否保存预设,下次直接使用? => 不保存,输入 N

  • 启动项目

    bash 复制代码
    npm run serve

ESlint代码规范及手动修复

代码规范错误

  • 如果代码不符合 standard 的要求,ESlint 会有提示

  • 两种解决方案:

    1. 手动修正
    • 根据错误提示来一项一项手动修改纠正。
    • 如果你不认识命令行中的语法报错是,根据错误代码去百度或者ESLint规则表中查找其具体含义。
    1. 自动修正
    • 基于 vscode 插件 ESLint 高亮错误,并通过配置 自动 帮助我们修复错误。
  • 配置

    js 复制代码
    // 当保存的时候,eslint自动帮我们修复错误
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 保存代码,不自动格式化
    "editor.formatOnSave": false
  • 注意:eslint的配置文件必须在根目录下,这个插件才能才能生效。打开项目必须以根目录打开,一次打开一个项目

  • settings.json 参考

    js 复制代码
    {
        "window.zoomLevel": 2,
        "workbench.iconTheme": "vscode-icons",
        "editor.tabSize": 2,
        "emmet.triggerExpansionOnTab": true,
        // 当保存的时候,eslint自动帮我们修复错误
        "editor.codeActionsOnSave": {
            "source.fixAll": true
        },
        // 保存代码,不自动格式化
        "editor.formatOnSave": false
    }
相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
nihui1237 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
shengmeshi9 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript
BillKu9 小时前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss