【从零开始NextJS】3)配置eslint与gitignore

1/安装eslint ts-eslint

npm i --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

2/配置eslint config
根目录下新建 .eslintrc.js

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: [
    '@typescript-eslint',
  ],
  env: {
    'browser': true,
    'es6': true,
    'node': true
  },
  parserOptions: {
    'ecmaVersion': 2018,
    'sourceType': 'module'
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  rules: {}
};

到此部最基础的eslint已经配置完并且生效了, 可以自己直接在rules里写入自己想用的规则.

3/ 一步到位配置严格的Airbnb规则

npm install eslint-config-airbnb-typescript 
           eslint-plugin-import@^2.20.1 
           eslint-plugin-jsx-a11y@^6.2.3 
           eslint-plugin-react@^7.19.0 
           eslint-plugin-react-hooks@^2.5.0 
           @typescript-eslint/eslint-plugin@^3.1.0 
           --save-dev

.eslintrc.js改成

  extends: ['airbnb-typescript'],
  parserOptions: {
    project: './tsconfig.json',
  },

然后在vscode里打开我们的pages/index.tsx, 发现已经一片红了, 对着相应的eslint规则调整一下就OK了

参考:
https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/README.md

https://www.npmjs.com/package/eslint-config-airbnb-typescript