当前位置: 首页 > Web前端 > vue.js

Saber前端框架使用ESlint规范统一的项目代码风格

时间:2023-04-01 02:13:29 vue.js

1.前言由于公司的Saber前端框架没有实现ESlint代码规范的约束,在开发过程中,各种代码风格差异很大,不能标准化,给以后维护带来困难。为此,我们公司决定采用ESlint规范来统一项目风格。2.代码风格javascript整体风格总体遵循ESlint规范。HTML和wxml一般遵循prettyhtml规范。调整了JavaScript细节。末尾没有分号。超过140个字符。换行符。使用单引号并且没有尾随逗号。括号前有个空格3.前期准备参考VSCode配置自动格式化,统一代码规范4.在项目中添加ESlint1。在project.eslintrc.js中添加函数声明时,括号前的空格是禁止的。ESlint规范冲突错误。冲突原因请参考prettierdoesnotsupportspacesafterfunctions?看看社区怎么说//函数声明中禁止括号前的空格'space-before-function-paren':'off'2.在项目根目录下添加.prettierrc指定PrettierFormatting规则解决格式化js文件时,定义的规则不生效。因为.editorconfig格式高于编译器的格式规则,所以Prettier定义的格式不生效。如果没有有效原因,请参考EditorConfig-Priority{"semi":false,"printWidth":140,"singleQuote":true,"trailingComma":"none","arrowParens":"avoid"}3.添加项目ESlintvueadd@vue/eslintsave时选择Standard和Lint4.修改报错信息修改报错信息有两种方式。一种是忽略文件检查并隐藏错误信息;二是根据报错信息规则修改。下面提供两种方式选择一种忽略文件检查,隐藏错误信息和忽略整个文件检查,一般写在文件头/*eslint-disable*/ignoresingle-lineinspection/*eslint-disable-line*/ignore单行检查/*eslint-disable-next-line*/忽略多行检查/*eslint-disable*///js代码/*eslint-enable*/忽略特定错误类型/*eslint-disable-line[errortype]*/根据报错信息修改,不要使用驼峰式,不要使用strong等===或strong不等于!==框架代码本身有错误解决方法:为了框架能正确运行,如果是框架本身的错误信息,使用忽略文件或者修改单行文件,写的代码自己严格遵守ESlint规范。