网络知识 娱乐 [HBuilderX开发uniapp]自动代码格式化插件安装及配置

[HBuilderX开发uniapp]自动代码格式化插件安装及配置

发布: 2023年2月14日 10:17:50

目录

一、前言

二、插件位置

1.在HBuilderX中找到工具------>插件安装​

2.点击“安装新插件”------>"前往插件市场安装"

 3.插件市场搜索eslint----->点击下载------>使用HBuilderX导入插件

 三、小结

四、补充

一、前言

HBuilderX作为H5 web开发的IDE其使用的普及化大幅提高，在应用中为使代码更加优美明晰，自动化格式代码插件的配置在我们编译过程中为我们提供极大的便利

二、插件位置

1.在HBuilderX中找到工具------>插件安装

2.点击“安装新插件”------>"前往插件市场安装"

 3.插件市场搜索eslint----->点击下载------>使用HBuilderX导入插件

 3.1.eslint.js: 用于js和html中的代码校验

3.2.eslint-plugin-vue:用于vue内的代码校验

（因此两个都需要下载）

 

 

 

4. 下载后找到设置--->工具--->插件配置---->保存时自动修复

 三、小结

至此自动保存代码插件下载配置已经完成。

四、补充

因为每个人的代码习惯不同，格式化代码要求也有所不一，想要依据自己的习惯进行细节配置可以继续看

1.工具--->插件安装--->已安装插件--->配置

 2.自定义校验规则

 3.可根据需要自行寻找符合自己需求的配置信息复制到自己的setting.js

//更详细的配置文档请参考：https://github.com/vuejs/eslint-plugin-vue#gear-configs
module.exports = {
    "extends": "plugin:vue/base",
    parserOptions: {
        ecmaVersion: 2017,
        sourceType: 'module'
    },
    'settings': {
        'html/html-extensions': [
          ".erb",
          ".handlebars",
          ".hbs",
          ".htm",
          ".html",
          ".mustache",
          ".nunjucks",
          ".php",
          ".tag",
          ".twig",
          ".wxml",
          ".we",
        ]
    },
    "rules":{
        //在computed properties中禁用异步actions
        'vue/no-async-in-computed-properties': 'error',
        //不允许重复的keys
        'vue/no-dupe-keys': 'error',
        //不允许重复的attributes
        'vue/no-duplicate-attributes': 'warn',
        //在  标签下不允许解析错误
        'vue/no-parsing-error': ['error',{
            'x-invalid-end-tag': false,
        }],
        //不允许覆盖保留关键字
        'vue/no-reserved-keys': 'error',
        //强制data必须是一个带返回值的函数
        // 'vue/no-shared-component-data': 'error',
        //不允许在computed properties中出现副作用。
        'vue/no-side-effects-in-computed-properties': 'error',
        //不允许key属性
        'vue/no-template-key': 'warn',
        //在