vue前端HbuliderEslint实时校验自动修复设置

目录
  • HBuilderX中ESLint插件安装
  • 自定义eslint-js规则
  • 注意事项

不管是多人合作还是个人项目，代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误，ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

HBuilderX中ESLint插件安装

HBuilderX 包含4款语法校验插件，htmlhint, stylelint, eslint-plugin-vue, eslint-js。点击工具—>插件安装，界面如下：

点击插件市场，进入插件市场，输入eslint搜索。

点击eslint，进入详情页，点击安装插件。注hbulider版本必须是2.6.8以上

安装eslint-vue和eslint-js后。点击菜单设置，勾选保存自动修复

自定义eslint-js规则

点击上图“打开文件.eslintrc.js进行配置”，打开文件代码如下：

  module.exports = {
      "plugins": [
          "html"
      ],
      "parser": "esprima",
      "parserOptions": {
          "ecmaVersion": 2018,
          "sourceType": "module",
          "ecmaFeatures": {
              "jsx": true
          },
          "allowImportExportEverywhere": false
      },
      "rules": {
          "camelcase": 2,           //强制驼峰法命名,
          "indent": [2, 4],         //缩进风格
          "id-match": 0,            //命名检测
          "init-declarations": 1,   //声明时必须赋初值
          "no-undef": 1,            //不能有未定义的变量
          "no-multi-spaces": "error", // 禁止多个空格
          "semi": [2, "always"] ,// 自动补充分号
          "quotes": ["error", "single"] // 使用单引号
      }
  };

详细规则参考：eslint 常用配置
重新启动Hbulider，当每次保存时自动JS代码中修复代码不一致的地方。

注意事项

以上使用Hbulider代码自动修复功能设置仅适用于Hbulider2.6.8以上版本。
参考文献：HBuilderX语法校验、eslint实时校验自动修复功能说明

以上就是vue前端HbuliderEslint实时校验自动修复设置的详细内容，更多关于HbuliderEslint实时校验自动修复的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • VUEJS实战之修复错误并且美化时间（2）

    VUEJS实战之修复错误并且美化时间（2）

    前言 在上一章中,我们通过基础的搭建,成功的渲染了列表页面.但是,其中的问题是很多的.这一章,我们来解决这些问题. 使用 v-bind 绑定数据. 上一章的代码,我们渲染出来了页面.但是如果打开了控制台,你会发现有错误.如下图所示: 这是因为页面进来的时候,会先执行我们的html代码,而此时,我们的vue还没开始工作.而我们的代码如下: <li v-for="info in data"> <i class="user_ico"> <im

  • vue+ESLint 配置保存 自动格式化代码

    1. 在.eslintrc.js 添加 vscode 终端启动服务 // 添加⾃定义规则 'prettier/prettier': [ // eslint校验不成功后,error或2则报错,warn或1则警告,off或0则⽆提示 'error', { singleQuote: true, semi: false, //结束是否加分号 printWidth: 160//每行最长字符 } ] 2.打开VS code 文件>首选项>设置>扩展>ESLint> // eslint格式

  • vue项目关闭eslint校验

    vue项目关闭eslint校验

    简介eslint eslint是一个JavaScript的校验插件,通常用来校验语法或代码的书写风格. 官方文档:https://eslint.org 这篇文章总结了eslint的规则:Eslint规则说明 关闭eslint校验 有了eslint的校验,可以来规范开发人员的代码,是挺好的.但是有些像缩进.空格.空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了.所以,我还是会选择关闭eslint校验. 下面就介绍一下vue项目中如何关闭这个校验. 首先我们在创建一个vue项目的时候,会有一

  • vue-cli3项目配置eslint代码规范的完整步骤

    前言 最近接手了一个项目,由于之前为了快速开发,没有做代码检查.为了使得代码更加规范以及更易读,所以就要eslint上场了. 安装依赖 安装依赖有两种方法: 在cmd中打上把相应的依赖加到devDependencies下,再npm install对应依赖. 在package.json文件加上相应依赖: "eslint-plugin-html": "^6.0.3", "@vue/cli-plugin-eslint": "^3.3.0&qu

  • vue前端HbuliderEslint实时校验自动修复设置

    vue前端HbuliderEslint实时校验自动修复设置

    目录 HBuilderX中ESLint插件安装 自定义eslint-js规则 注意事项 不管是多人合作还是个人项目,代码规范是很重要的.这样做不仅可以很大程度地避免基本语法错误,ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确.风格统一的代码. HBuilderX中ESLint插件安装 HBuilderX 包含4款语法校验插件,htmlhint, stylelint, eslint-plugin-vue, eslint-js.点击工具->插件安装,界面如下: 点击插件市

  • 前端Vue中常用rules校验规则详解

    目录 1.是否合法IP地址 2.是否手机号码或者固话 3.是否固话 4.是否手机号码 5.是否身份证号码 6.是否邮箱 7.合法url 8.验证内容是否包含英文数字以及下划线 9.自动检验数值的范围 10.验证数字输入框最大数值 11.验证是否1-99之间 12.验证是否整数 13.验证是否整数,非必填 14. 验证是否是[0-1]的小数 15. 验证是否是[1-10]的小数,即不可以等于0 16.验证是否是[1-100]的小数,即不可以等于0 17.验证是否是[0-100]的小数 18.验证端

  • Vue Element-ui表单校验规则实现

    目录 1.前言 2.规则校验的入门模式 2.1.示例代码 2.2.form项 2.3.prop项 2.4.rules项 2.5.rule项 2.6.使用规则 2.7.规则校验的核心 3.规则校验的进阶模式 3.1.嵌套对象属性名 3.2.自定义校验器validator 3.3.类型type 3.3.数据转换transform 3.4.数值范围Range 3.5.枚举值 3.6.正则Pattern 3.7.长度len 3.8.空白whitespace 3.9.i18n 4.规则校验的高级模式 4.

  • VUE + OPENLAYERS实现实时定位功能

    VUE + OPENLAYERS实现实时定位功能

    前言 本系列文章介绍一个简单的实时定位示例,示例的组成主要包括: 服务后端,使用 Java 语言编写,模拟生成 GeoJSON 数据. 前端展示,使用 Vue + OpenLayers ,负责定时向后端服务请求 GeoJSON 数据,并在以标签的形式展现定位数据. 实现的效果: 一.定义标签样式 var image = new CircleStyle({ radius: 5, fill: new Fill({ color: "rgba(255, 0, 0, 1)" }), stroke

  • Vue前端书写规范大全(非常详细!)

    命名规范 s:表示字符串.例如:sName,sHtml;n:表示数字.例如:nPage,nTotal;b:表示逻辑.例如:bChecked,bHasLogin;a:表示数组.例如:aList,aGroup;r:表示正则表达式.例如:rDomain,rEmail;f:表示函数.例如:fGetHtml,fInit;o:表示以上未涉及到的其他对象,例如:oButton,oDate; 1:作用域不大临时变量可以简写,比如:str,num,bol,obj,fun,arr. 2:循环变量可以简写,比如:i,

  • 使用Vue开发一个实时性时间转换指令

    使用Vue开发一个实时性时间转换指令

    前言 最近有一个说法,如果你看见某个网站的某个功能,你就大概能猜出背后的业务逻辑是怎么样的,以及你能动手开发一个一毛一样的功能,那么你的前端技能算是进阶中高级水平了.比如咱们今天要聊的这个话题:如何用Vue开发一个实时性的时间转换指令? 接下来正文从这开始~ 如上图所示(我是截取的某技术社区首页的部分页面),大家看到用红色边框勾选中的时间文字了吧.很多网站发布动态的时候,都会有一个相对本机时间转换后的相对时间.那你知道这个功能实现的背后原理是什么吗?如果有兴趣的,请备好瓜子,茶水,继续往下读.

  • 搭建element-ui的Vue前端工程操作实例

    一.安装npm镜像 (1)下载node.js, 配置node.js的环境变量 检测PATH环境变量是否配置了Node.js,点击开始=>运行=>输入"cmd" => 输入命令"path" 检查Node.js版本 在命令窗口输入:npm install -g cnpm –registry=https://registry.npm.taobao.org 二.安装全局vue-cli (1)npm install -g vue-cli 回车,验证是否安装成

  • Vue前端开发规范整理(推荐)

    基于Vue官方风格指南整理 一.强制 1. 组件名为多个单词 组件名应该始终是多个单词的,根组件 App 除外. 正例: export default { name: 'TodoItem', // ... } 反例: export default { name: 'Todo', // ... } 2. 组件数据 组件的 data 必须是一个函数. 当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方),它的值必须是返回一个对象的函数. 正例: // In a .vue fi

  • Vue 前端实现登陆拦截及axios 拦截器的使用

    该项目是利用了Github 提供的personal token作为登录token,通过token访问你的Repository List.通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截.登出.token失效的拦截及对应 axios 拦截器的使用. 准备 你需要先生成自己的 Github Personal Token( 生成Token). Token 生成后 访问 Demo,即可查看你的Repository List. 项目结构 ├── README.md ├── dist // 打包构

  • 详解Vue前端对axios的封装和使用

    Axios 是一个基于 promise 的 HTTP 库.将axios封装好后能更高效的开发并且方便维护,而且在以后的项目中也能直接套用,所以封装好是必要的.在参考了很多方法后,我拼凑出了一套我认为很实用的方法. 首先是http目录下的两个文件 helper.js 这个是功能性文件包括拼接url.过滤参数等,把方法集合到一个文件方便维护和修改. 读一遍知道他有什么功能就行了 const helper = { // 根据name获取地址栏的参数值 getQueryString (name) { l

随机推荐