2023年7月18日发(作者:)
HBuilderX代码校验及代码格式化⼀、添加 EditorConfig 代码风格统⼀⼯具EditorConfig 有助于维护跨多个编辑器和 IDE 从事同⼀项⽬的多个开发⼈员的⼀致编码风格,团队必备神器。在项⽬根⽬录创建.editorconfig并加⼊以下内容.editorconfig# # 告诉EditorConfig插件,这是根⽂件,不⽤继续往上查找root = true# 匹配全部⽂件[*]# 结尾换⾏符,可选"lf"、"cr"、"crlf"end_of_line = lf# 在⽂件结尾插⼊新⾏insert_final_newline = true# 删除⼀⾏中的前后空格trim_trailing_whitespace = true# 匹配js和py结尾的⽂件[*.{js,py}]# 设置字符集charset = utf-8# 匹配py结尾的⽂件[*.py]# 缩进风格,可选"space"、"tab"indent_style = space# 缩进的空格数indent_size = 2# 以下匹配,类同[Makefile]indent_style = tab# tab的宽度tab_width = 4# 以下匹配,类同[lib/**.js]indent_style = spaceindent_size = 2[{,.}]indent_style = spaceindent_size = 2⼆、安装eslint-plugin-vue插件,vue语法校验1. DCLOUD插件市场搜索eslint-plugin-vue,使⽤HBuilderX导⼊2. 配置步骤:3. .//更详细的配置⽂档请参考:/vuejs/eslint-plugin-vue#s = { "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", ".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', //在
'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,
'camelcase': 2, //强制驼峰法命名, 'indent': [2, 4], //缩进风格 'id-match': 0, //命名检测 'init-declarations': 1, //声明时必须赋初值 'no-undef': 1, //不能有未定义的变量 'no-multi-spaces': 'error', // 禁⽌多个空格
'semi': [2, 'never'], // ⾃动补充分号 "always" (默认值)在语句结尾处需要分号; "never" 不允许分号作为语句的末尾 'quotes': ['error', 'single'] // 使⽤单引号 'quotes': ['error', 'single'] // 使⽤单引号 }};三、安装eslint-js插件1. DCLOUD插件市场搜索eslint-js,使⽤HBuilderX导⼊2. 配置步骤:3. .//详细配置教程请参考:/docs/user-guide/s = { "plugins": [ "html" ], "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, 'never'], // ⾃动补充分号 "always" (默认值)在语句结尾处需要分号; "never" 不允许分号作为语句的末尾 'quotes': ['error', 'single'] // 使⽤单引号 }};四、安装 stylelint插件,css、less、sass语法校验1. DCLOUD插件市场搜索stylelint,使⽤HBuilderX导⼊2. 配置步骤:3. .s = { "extends": "stylelint-config-recommended", "rules": { "unit-no-unknown": false, "indentation": "tab", //缩进 "unit-no-unknown": true, //禁⽌未知单位 "color-hex-case": [ "lower", { "message": "Lowercase letters are easier to distinguish from numbers" } ], "max-empty-lines": 2, "unit-whitelist": ["em", "rem", "%", "s", "px", "upx", "rpx"], "number-leading-zero": null }, // 忽略其他⽂件,只校验样式相关的⽂件 ignoreFiles: [ "node_modules/**/*", "public/**/*", "dist/**/*", "**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts", ],}五、代码格式化快捷键为了代码整齐便于阅读,写完代码随时进⾏格式化 windows:ctrl+k, Mac: command+k
发布者:admin,转转请注明出处:http://www.yc00.com/news/1689628818a272056.html
评论列表(0条)