ESLint

规范化标准

规范化是践行前端工程化中重要的一部分

• 因为软件开发需要多人协同
• 不同开发者代码风格不同
• 增加项目开发成本
• 团队需要明确同一的标准

需要标准化地方

• 代码、文档、提交日志
• 开发中编写的代码
• 代码标准化很重要
• 实施方法 人为约定 工具实现Lint

常见的规范化实现

ESLint使用

• 定制ESLint校验规则
• ESLint对TS的支持
• ESLint结合自动化工具或webpack
• ESLint的衍生工具
  Stylelint工具的使用

ESLint介绍

最为主流的JS lint工具检测JS代码质量
ESLint很容易统一开发者风格
ESLint 可帮助提升编码能力

ESLint安装

步骤

初始化项目
安装ESLint模块作为开发依赖
通过CLI命令验证安装结果
npm init --yes
npm install eslint --save-dev  作为项目依赖安装到项目
在node_modules下bin目录会多出一个ESlint的可执行文件
cd .\node_modules
cd .\.bin
.\eslint --version  查看安装版本   
或者直接 yarn --version
或者  npx eslint --version

使用

ESLint 检查步骤
编写问题代码
使用eslint执行检测
完成eslint使用配置

新建 js 文件

const foo = 123;
function fn(){
   
    console.log('hello')
   
   
   
            console.log('eslint');   
}

fn (
    syy()

执行
npx eslint js文件名
会显示错误并提示没有eslint的配置文件

新建eslint配置文件

npx eslint --init

一般配置选项选择第三项 ，代码检查语法等都包含
第二选择项 是指模块化标准
第三项是选择哪个框架
第四项是否使用TS
第五项选择 运行环境
第六项 选择代码风格
最后一项选择 配置文件格式 js/json/yaml

会在项目下 新增  .eslintrc.js
再次执行  npx eslint   js文件名     
会将错误抛出
执行  npx eslint js文件名  --fix   修改语法风格错误

ESLint 配置文件解析

修改关闭某些校验规则
默认配置文件