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

这篇具有很好参考价值的文章主要介绍了[HBuilderX开发uniapp]自动代码格式化插件安装及配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、前言

二、插件位置

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

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

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

 三、小结

四、补充


一、前言

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

二、插件位置

1.在HBuilderX中找到工具------>插件安装[HBuilderX开发uniapp]自动代码格式化插件安装及配置

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

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

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

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

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

(因此两个都需要下载)

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

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

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

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

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

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

 三、小结

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

四、补充

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

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

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

 2.自定义校验规则

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

 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',
        //在 <template> 标签下不允许解析错误
        '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',
        //<template>不允许key属性
        'vue/no-template-key': 'warn',
        //在 <textarea> 中不允许mustaches
        'vue/no-textarea-mustache': 'error',
        //不允许在v-for或者范围内的属性出现未使用的变量定义
        'vue/no-unused-vars': 'warn',
        //<component>标签需要v-bind:is属性
        'vue/require-component-is': 'error',
        // render 函数必须有一个返回值
        'vue/require-render-return': 'error',
        //保证 v-bind:key 和 v-for 指令成对出现
        'vue/require-v-for-key': 'error',
        // 检查默认的prop值是否有效
        'vue/require-valid-default-prop': 'error',
        // 保证computed属性中有return语句 
        'vue/return-in-computed-property': 'error',
        // 强制校验 template 根节点
        'vue/valid-template-root': 'error',
        // 强制校验 v-bind 指令
        'vue/valid-v-bind': 'error',
        // 强制校验 v-cloak 指令
        'vue/valid-v-cloak': 'error',
        // 强制校验 v-else-if 指令
        'vue/valid-v-else-if': 'error',
        // 强制校验 v-else 指令 
        'vue/valid-v-else': 'error',
        // 强制校验 v-for 指令
        'vue/valid-v-for': 'error',
        // 强制校验 v-html 指令
        'vue/valid-v-html': 'error',
        // 强制校验 v-if 指令
        'vue/valid-v-if': 'error',
        // 强制校验 v-model 指令
        'vue/valid-v-model': 'error',
        // 强制校验 v-on 指令
        'vue/valid-v-on': 'error',
        // 强制校验 v-once 指令
        'vue/valid-v-once': 'error',
        // 强制校验 v-pre 指令
        'vue/valid-v-pre': 'error',
        // 强制校验 v-show 指令
        'vue/valid-v-show': 'error',
        // 强制校验 v-text 指令
        'vue/valid-v-text': 'error',
        'vue/comment-directive': 0
    }
};

 4.自己的setting.js[HBuilderX开发uniapp]自动代码格式化插件安装及配置文章来源地址https://www.toymoban.com/news/detail-401935.html

到了这里,关于[HBuilderX开发uniapp]自动代码格式化插件安装及配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vscode格式化代码禁止自动换行

    问题产生 代码格式化的功能由插件提供,比如veture,默认的配置超过很短的长度就回换行。 所以需要修改配置。 打开 文件 - 首选项 - 设置,然后点击右上角的图标。进入settings.json文件。 搜狗截图20220421170631.png 在这里面写配置。 问题解决 1.使用Prettier - Code formatter来格式化

    2024年02月06日
    浏览(52)
  • VSCode设置eslint自动缩进和自动格式化代码

    (1)点击左下角齿轮图标并选择设置: (2)在文本编辑器中找到 settings.json settings.json的初始内容:

    2023年04月08日
    浏览(92)
  • vscode中如何实现保存自动格式化代码

    两种方法: 1.配置settings.json 文件 第一步,点击 文件 首选项 设置   进入setting.json编辑页面,将下方设置项粘贴到大括号中: \\\"editor.formatOnType\\\": true, \\\"editor.formatOnSave\\\": true, 一定记得前边加个逗号  2.直接在设置中配置一个选项即可      

    2024年02月07日
    浏览(58)
  • VSCode代码格式化自动换行问题

    VSCode设置了保存自动格式化时,代码超过一定长度后会自动换行,我想禁止自动换行,找了很多方法都没有效果。 后来经过了长时间的寻找,终于找到了相应的解决方法,分为两个,如果其中一个不行,可以尝试另外一个。 第一种方法: 打开VSCode,然后在编辑器的顶部菜单

    2024年02月16日
    浏览(51)
  • [效率提升]webstorm配置Prettier:代码自动格式,格式化时清除空行,修改使用代码模板

      全局安装prettier  配置: 2.1 配置安装路径 2.2 针对以下文件运行: 默认是没有包含Vue的,我们手动加上即可: 每次保存的时候,就会自动格式化了。

    2024年02月06日
    浏览(58)
  • VS Code中python代码自动格式化方法

    为了能够在VS Code中使自己写的Python代码更加符合规范并且适宜阅读,往往需要手工进行代码格式矫正,例如等号左右的空格、函数参数与等号之间的空格等。下面讲解一种简单的自动格式化方法。 首先安装yapf库: pip install yapf 然后在VS Code菜单栏中依次打开 File—Preferences—

    2024年02月16日
    浏览(84)
  • VS Code保存后自动格式化Vue代码---Vetur

    在VS Code里面编辑Vue代码,通常我们会安装插件Vetur,本次介绍的格式化代码也依赖于Vetur插件。具体见一下步骤 注: VS Code版本为1.74.3 1. 安装插件Vetur 2. 配置自动格式化,具体路径【文件】-【首选项】-【设置】,打开设置(json) 3. 将以下内容复制到settings.json 完成以上配置

    2024年02月15日
    浏览(51)
  • VScode使用clang format文档自动代码格式化(C语言)

    1、格式化之前的准备。 可以用Clang-Format插件,也可以用C/C++插件。因为现在的C/C++插件已经具备了这个功能。 2、配置相关 或者在setting.json中粘贴下面的代码,需要将C_Cpp.clang_format_path换成自己的clang-format路径。 3、.clang-format文件 下面是我的配置: ps:网上我看很多人提到这

    2024年02月10日
    浏览(44)
  • VScode自动格式化代码(tab缩进、符号空格)配置beautify插件使用

    安装插件 在插件库搜索beautify,会弹出很多插件 你需要根据你自己的语言选择对应的插件安装,尽量选择在维护中的插件 我是做前端的,所以选择的是beautify blade,格式化语言:javascript, JSON, CSS, Sass, and HTML ![在这里插入图片描述](https://img-blog.csdnimg.cn/cc42b7d4f0b549a78d16c69e7d33

    2024年02月12日
    浏览(55)
  • 第二章 React项目配置ESlint和Prettier实现自动格式化代码以及统一代码风格

    欢迎加入本专栏!本专栏将引领您快速上手React,让我们一起放弃放弃的念头,开始学习之旅吧!我们将从搭建React项目开始,逐步深入讲解最核心的hooks,以及React路由、请求、组件封装以及UI(Ant Design)框架的使用。让我们一起掌握React,开启前端开发的全新篇章! 需要准

    2024年02月03日
    浏览(74)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包