Rollup从0到1上手前端组件库开发 | 代码检测

上文回顾

• Rollup从0到1上手前端组件库开发 | 起步
• Rollup从0到1上手前端组件库开发 | 模块构建
• Rollup从0到1上手前端组件库开发 | tree-shaking 机制
• Rollup从0到1上手前端组件库开发 | external属性
• Rollup从0到1上手前端组件库开发 | CJS插件
• Rollup从0到1上手前端组件库开发 | 常用插件
• Rollup从0到1上手前端组件库开发 | VUE组件编译
• Rollup从0到1上手前端组件库开发 | VUE组件使用
• Rollup从0到1上手前端组件库开发 | 发布使用

通过上文的讲解, 我们目前已经可以在本地使用了, 但是在团队开发中如何控制代码质量和检测代码呢?

使用 EsLint 规范代码

安装ESLint

yarn add eslint -D

使用Eslint

在终端输入命令

$  ./node_modules/.bin/eslint --init
# 选择ESLint的用途
? How would you like to use ESLint? … 
❯ To check syntax only # 仅检查语法
  To check syntax and find problems
  To check syntax, find problems, and enforce code style
  
? What type of modules does your project use? … # 选择你项目使用的模块
❯ JavaScript modules (import/export) # ES6
  CommonJS (require/exports)
  None of these
  
? Which framework does your project use? … # 当前使用的框架
  React
❯ Vue.js
  None of these
? Does your project use TypeScript? · No / Yes # 是否使用Typescript No

# 在什么环境下运行代码
? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser #浏览器
✔ Node

# format时希望通过什么文件配置
? What format do you want your config file to be in? … 
❯ JavaScript
  YAML
  JSON

# 是否希望安装vue.js的语法检查
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest
? Would you like to install them now with npm? › No / Yes yes

Installing eslint-plugin-vue@latest...

Successfully created .eslintrc.js file in project  # 安装完毕

项目中会初始化一个 .eslintrc.js的配置文件

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    // eslint:recommended ESLINT推荐的规范
    "extends": ["plugin:vue/essential","eslint:recommended" ],
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};

尝试一下

在 package.json 文件 script 中加入

"script": {
   "lint": "eslint ./src"
}

在 index.js 中添加 var a = 1 但是不使用

yarn lint 运行

3:5  error  'a' is defined but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

error Command failed with exit code 1.
# 报错了, a 被赋值了但是从来没有被使用