前端规范化工具及ESLint的使用

用到的地方

• 代码、文档、日志...

EsLint

1. 作用

• 用来检测JS代码质量
• 统一开发者的编码风格
• 可以帮助开发者提升编码能力，修正编码习惯

2. 安装

• 初始化项目 npm init --yes

• 安装模块 npm install eslint --save-dev

• 验证安装

  cd ./node_modules

  cd ./.bin

  ./eslint -v

  • 或者 yarn eslint

  npx eslint -v

3. 快速上手

• 使用eslint执行检测

  npx eslint --init

• 运行代码

  npx eslint ./demo.js --fix

• 完成eslint配置

module.exports = {
    // 标记当前代码最终运行环境，可以同时设置多个环境
    "env": {
        "browser": true,
        "es2021": true
    },
    // 继承共享配置
    "extends": [
        "standard"
    ],
    // 设置语法指示器相关配置，检测语法
    "parserOptions": {
        "ecmaVersion": 10
    },
    // 配置校验规则的开启或者关闭
    "rules": {
    }
};

• 配置注释

const str = '${name} is ' // eslint-disable-line no-template-curly-in-string

4. 使用

• 结合自动化工具
• 结合webpack
• 现代化项目(例如vue)集成ESLint
• ESLint检查TS
• Git Hooks：在代码提交前强制lint

5. 其他

• Stylelint
• Prettier：完成代码的自动格式化