乐趣区

关于vue.js:Saber前端框架用ESlint规范统一项目代码风格

jiezi

一、前言

  因为公司 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 标准。

退出移动版