@autobest-ui/eslint-plugin

介绍

ts/js语法检测集成

安装

npm install @autobest-ui/eslint-plugin --save-dev

使用方式

1. 创建.eslintrc.js文件
2. 引入依赖

module.exports = {
  root: true,
  extends: ['plugin:@autobest-ui/recommended']
};

标准语法检测

写法为extends: ['plugin:@autobest-ui/recommended']，该方式是前端要求的正式ts/js写法。要求比较严格，主要应用在复杂、频繁维护项目中。

妥协的语法检测

写法为extends: ['plugin:@autobest-ui/compromised']，该方式主要应用在DEMO性质、快速开发的项目中。

tsconfig.json引入common配置

{
  "extends": "@autobest-ui/eslint-plugin/tsconfig-common.json"
}

行元素或文本空格问题

新增@autobest-ui/line-element-whitespace, 处理三种情况

1. 文本后有行元素或其他行元素, 例如:
   • text<span>xxxx</span> => text <span>xxxx</span>
   • text{'xxxx'} => text {'xxxx'}
2. 行元素后有文本或其他行元素, 例如:
   • <span>xxxx</span>text => <span>xxxx</span> text
   • <span>xxxx</span><span>xxxx</span> => <span>xxxx</span> <span>xxxx</span> 或 <span>xxxx</span>{' '}<span>xxxx</span>
   • <span>xxxx</span>{'xxxx'} => <span>xxxx</span> {'xxxx'}
3. 模版字符串后有文本或其他行元素, 例如:
   • {'xxxx'}<span>xxxx</span> => {'xxxx'} <span>xxxx</span>
   • {'xxxx'}xxxx => {'xxxx'} xxxx
   • {'xxxx'}{'xxxx'} => {'xxxx'} {'xxxx'}

注意: 有些情况下,我们是不能加空格的,比如英文文字后的句号('.'),感叹号, 逗号, 双引号等特殊情况.下面列举了如下所有情况

// 常用的行元素有下列情况, 其他inline标签(如:sup)用法比较特殊,暂不检测
const InlineTagNames = ['span', 'strong', 'b', 'a', 'i', 'del', 'small', 'em', 'label', 'var'];

// 特殊文本字符, 这种情况下文本与标签之间可以不用空格
// 特殊文字在末尾的情况
const SpecialTextLastCharRegList = [
   /"$/,
   /'$/,
   /<$/,
   />$/,
   /\$$/,
   /\($/,
   /\)$/,
   /\[$/,
   /]$/,
   /\{$/,
   /}$/,
   /® $/,
   /:$/
];

// 特殊文字在头部的情况
const SpecialTextFirstCharRegList = [
   /^"/,
   /^'/,
   /^</,
   /^>/,
   /^,/,
   /^\./,
   /^\$/,
   /^!/,
   /^;/,
   /^\(/,
   /^\)/,
   /^\[/,
   /^]/,
   /^\{/,
   /^}/,
   /^® /,
   /^:/
];

使用中文字符问题

新增@autobest-ui/full-width-punctuation, 处理代码中使用了中文字符的问题

自动将“”‘’，。；：！？替换成""'',.;:!?

注：对于元素文本内容的“”‘’会替换成"和'

webpack eslint配置

1. 打开Setting => Eslint
2. 选择Automatic Eslint configuration radio即可