maq
maq
  • 发布:2023-09-11 22:35
  • 更新:2023-09-11 22:35
  • 阅读:620

【经验分享】HX 源代码格式化用法

分类:HBuilderX

作为一枚强迫症程序员,如果源代码格式不能精细控制,那是不可接受的。

HBuilderX 是一款功能强大的 IDE 工具,它提供了多种途径用于对源代码格式进行控制,但要完全驾驭它还需要一些经验。
我这里把个人摸索的结果做个小结,希望有人能觉得有用。

主要考虑的文件类型:

  • .js
  • .css
  • .vue

主要考虑的格式:

  • 缩进用空格而不是 tab
  • 缩进 2 个空格

HX 中编辑代码时,有几处设置可以控制格式风格,优先级从低到高:

  1. 主菜单【重排代码格式】,实际采用的是 %AppData%\Roaming\HBuilder X\extensions\format\jsbeautifyrc.js
  2. 主菜单【编辑-缩进】里面设置
  3. 项目中的 .jsbeautifyrc 配置文件
  4. 项目中的 .eslintrc.js 配置文件(需安装 eslint-js 和 eslint-plugin-vue 插件)

其中 1/2/3 是在 HX 里【重排代码格式】时起作用,4 是在保存文件时自动触发(如果开启了的话)。

考虑到格式风格的选择与项目相关,所以最好是在项目的根目录下放置 .jsbeautifyrc.eslintrc.js 配置文件。

下面的配置文件可以解决大部分问题:

// .jsbeautifyrc  
{  
  "js": {  
    "indent_size": 2,  
    "indent_char": " ",  
    "indent_with_tabs": false,  
    "jslint_happy": true  
  },  
  "css": {  
    "indent_size": 2,  
    "indent_char": " ",  
    "indent_with_tabs": false  
  }  
}
// .eslintrc.js  
module.exports = {  
  "extends": "plugin:vue/vue3-recommended",  
  "rules":{  
    'vue/html-indent': ['error', 2, {  
      baseIndent: 0  
    }],  
    'vue/first-attribute-linebreak': ['error', {  
      singleline: 'ignore',  
      multiline: 'below'  
    }],  
    'vue/max-attributes-per-line': ['error', {  
      singleline: 3,  
      multiline: 1  
    }],  
    'vue/script-indent': ['error', 2, {  
      baseIndent: 0  
    }],  
    'no-trailing-spaces': 'error',  
    'no-multi-spaces': 'error',  
    'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'],  
    'no-tabs': 'error',  
    'indent': ['error', 2],  
  }  
}

注意事项

在 HX 的编辑器中打开 .js 文件时,如果进行【重排代码格式】操作,是 jsbeautify 在起作用,而在保存时的自动重排,是 eslint-js 插件在起作用。

如果两者的格式设置冲突的话,后者会最终胜出,但操作过程会比较困惑。

所以应尽量设置成保持一致,且一般不用【重排代码格式】,不过有些混乱的代码可能需要先用【重排代码格式】来整理一下效果会更好。

0 关注 分享

要回复文章请先登录注册