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

9次阅读

共计 1061 个字符,预计需要花费 3 分钟才能阅读完成。

一、前言


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

二、代码格调


  • 整体格调

    • javascript大体上遵循 ESlint 标准
    • htmlwxml大体上遵循 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
  • 抉择 StandardLint on Save

4、批改报错信息

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

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


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

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

正文完
 0