作为一枚强迫症程序员,如果源代码格式不能精细控制,那是不可接受的。
HBuilderX 是一款功能强大的 IDE 工具,它提供了多种途径用于对源代码格式进行控制,但要完全驾驭它还需要一些经验。
我这里把个人摸索的结果做个小结,希望有人能觉得有用。
主要考虑的文件类型:
.js
.css
.vue
主要考虑的格式:
- 缩进用空格而不是
tab
- 缩进 2 个空格
HX 中编辑代码时,有几处设置可以控制格式风格,优先级从低到高:
- 主菜单【重排代码格式】,实际采用的是
%AppData%\Roaming\HBuilder X\extensions\format\jsbeautifyrc.js
- 主菜单【编辑-缩进】里面设置
- 项目中的
.jsbeautifyrc
配置文件 - 项目中的
.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 个评论
要回复文章请先登录或注册