一、前言

  因为公司Saber前端框架没有进行ESlint代码标准的束缚，导致在开发过程中，各种代码格调迥异，无奈造成标准，造成当前保护的艰难。为此，我司决定用ESlint标准对立我的项目格调。

二、代码格调

  • 整体格调

    • javascript大体上遵循ESlint标准
    • html、wxml大体上遵循prettyhtml标准

  • javascript细节调整

    • 结尾无分号
    • 超过140个字符换行
    • 应用单引号
    • 无尾随逗号
    • 箭头函数单个参数不加分号
    • 函数申明时禁止圆括号前有空格

三、后期筹备

  • 参考VS Code配置主动格式化，对立代码标准

四、我的项目增加ESlint

1、在我的项目.eslintrc.js中增加 函数申明时禁止圆括号前有空格 规定

  解决Prettier格式化时与ESlint标准抵触报错。抵触起因可参考prettier 不反对函数后空格? 看社区怎么说

// 函数申明时禁止圆括号前有空格'space-before-function-paren': 'off'

2、我的项目根目录增加.prettierrc，规定Prettier格式化规定

  解决格式化js文件时，定义的规定没有失效。因为.editorconfig格式化高于编译器的格式化规定，导致Prettier定义的格式化没失效。没有失效起因可参考EditorConfig-优先级

{  "semi": false,  "printWidth": 140,  "singleQuote": true,  "trailingComma": "none",  "arrowParens": "avoid"}

3、我的项目增加ESlint
  • vue add @vue/eslint
  • 抉择Standard和Lint on Save

4、 批改报错信息

  批改报错信息有两种，一种是疏忽文件查看，暗藏报错信息；第二种是依据报错信息规定批改。以下提供两种形式二选其一即可

  1. 疏忽文件查看，暗藏报错信息
疏忽整个文件查看，个别写在文件头部/* eslint-disable */疏忽单行查看/* eslint-disable-line */疏忽下一行测验/* eslint-disable-next-line */疏忽多行查看/* eslint-disable */// js code/* eslint-enable */疏忽具体谬误类型 /* eslint-disable-line [谬误类型] */


  1. 依据报错信息进行批改

    • 没有用驼峰命名
    • 没有用强等===或强不等!==
    • 框架代码自身有误
解决形式：为了框架能正确运行，如果是框架自身的报错信息，用疏忽文件或单行文件进行批改，本人写的代码严格遵循ESlint标准。