Skip to main content

10.如何使用eslint

1 什么是eslint?​

eslint是一个代码规范约束工具,能根据开发者的代码规范配置文件去分析开发者写的代码,从中排查出不规范或错误的代码.

2 代码示例​

2.1 初始化react项目​

$ pnpx create-react-app my-app --template typescript  # 创建react项目
$ cd my-app # 进入到项目
$ pnpm start # 启动项目

项目已经初始化并启动了,就到下一步了.

2.2 安装eslint并生成配置​

 $ pnpm install eslint --save-dev # 安装eslint
 $ pnpm create @eslint/config # 生成配置根据自己的情况选择
 ✔ How would you like to use ESLint? · style # <-- 选择强制样式的
 ✔ What type of modules does your project use? · esm # <-- 选择import/export
 ✔ Which framework does your project use? · react # <-- 选择react
 ✔ Does your project use TypeScript? · No / Yes # <-- 是
 ✔ Where does your code run? · browser # <-- 选择浏览器的
 ✔ How would you like to define a style for your project? · guide 
 ✔ Which style guide do you want to follow? · airbnb # <-- 选择airbnb
 ✔ What format do you want your config file to be in? · JavaScript #<-- 配置文件用js
 Checking peerDependencies of eslint-config-airbnb@latest
 The config that you've selected requires the following dependencies:

 eslint-plugin-react@^7.28.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react-hooks@^4.3.0 @typescript-eslint/parser@latest
 ✔ Would you like to install them now? · No / Yes
 ✔ Which package manager do you want to use? · pnpm

最后要生成.eslintrc.js,这个配置文件:

.
├── .eslintrc.js
├── .git
├── .gitignore
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── pnpm-lock.yaml
├── public
├── src
└── tsconfig.json

4 directories, 7 files

而eslint正是以这个文件去排查开发者的代码是否出错

2.3 应用到项目中​

在package.json中加入:

package.json
  ...
  "scripts": {
    ...
      "lint:fix": "eslint --fix --ext .ts,.tsx ."
  }
  ...

意思是: 当运行pnpm lint:fix, 就尝试修复错误,排查的文件限定在ts或tsx文件中

在App.tsx中写点错误来验证下

src/App.tsx
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  will be error// <--  这里写点错误验证下
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
验证下能否排查出来
$ pnpm lint:fix 
> my-app@0.1.0 lint:fix /Users/wuchuheng/tmp/my-app
> eslint --fix --ext .ts,.tsx .


/Users/wuchuheng/tmp/my-app/src/App.test.tsx
  3:17  error  Unable to resolve path to module './App'        import/no-unresolved
  3:17  error  Missing file extension for "./App"              import/extensions
  5:1   error  'test' is not defined                           no-undef
  6:10  error  JSX not allowed in files with extension '.tsx'  react/jsx-filename-extension
  8:3   error  'expect' is not defined                         no-undef

/Users/wuchuheng/tmp/my-app/src/App.tsx
  9:5  error  JSX not allowed in files with extension '.tsx'  react/jsx-filename-extension

/Users/wuchuheng/tmp/my-app/src/VoxelDog.tsx
   4:17  error  Unable to resolve path to module './App'              import/no-unresolved
   4:17  error  Missing file extension for "./App"                    import/extensions
   5:29  error  Unable to resolve path to module './reportWebVitals'  import/no-unresolved
   5:29  error  Missing file extension for "./reportWebVitals"        import/extensions
  11:3   error  JSX not allowed in files with extension '.tsx'        react/jsx-filename-extension

✖ 11 problems (11 errors, 0 warnings)

3 把eslint的错误消息导入vim的quickfix​

把错误消息导入vim需要2个步骤:

  • 1 设置make编译命令
  • 2 需要从错误消息中提取文件名,行号,列号和错误消息等信息,这种方式要么是写新的正 则才能获取到数据,要么把错误消息格式为unix格式的错误消息,这样由于内部有内置的 匹配规则.这里选用后者方式

3.1 设置make​

在vim中设置: :setlocal makeprg=NODE_DISABLE_COLORS=1\ pnpm lint:fiix 意思是:

$ NODE_DISABLE_COLORS=1 # 取消获取终端输出的消息的颜色
$ pnpm lint:fix` #  然后开始排查

3.2 修改eslint的errorforamt为unix风格​

...
"scripts": {
  ...
    "lint:fix": "eslint --fix --format unix --ext .ts,.tsx ."
    ...
}
...

3.3 最后在vim中执行make​

就可以了 执行:copen打开vim的quickfix就能看看已经被导入的错误消息了.

参考资料​

官方文档