eslint

npm init @eslint/config

vue-template git:(vue2-tpl) ✗ npm init @eslint/config
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest eslint@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · yarn
Installing eslint-plugin-vue@latest, eslint@latest
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 搭配vue使用

vue2.6: yarn add eslint-plugin-vue -D

配置eslintrc

/*
 * @Author: 仲灏<izhaong@outlook.com>🌶🌶🌶
 * @Date: 2022-08-31 16:32:52
 * @LastEditTime: 2022-09-28 16:36:41
 * @LastEditors: 仲灏<izhaong@outlook.com>🌶🌶🌶
 * @Description:
 * @FilePath: /yitui-admin/.eslintrc.js
 */
module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: ['eslint:recommended', 'plugin:vue/recommended', 'prettier'],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  plugins: ['vue'],
  rules: {}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

vscode配置

{
	"[javascriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },  
  "vetur.format.defaultFormatter.js": "prettier-eslint"

  // auto save
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

[propName:string]: any // 表示动态添加属性

interface UserSchema2{
   readonly name:string, // 只读属性
    age:number|string, // 接口中使用联合类型
    sex?:string // 表示存疑, 该属性可选
    [propName:string]: any // 表示动态添加属性
}

let user2:UserSchema2 = {name:'王五',age:18,weight:180}

console.log(user2);

1
2
3
4
5
6
7
8
9
10
11

#

# 搭配typescript使用

https://typescript-eslint.io/

parser: '@typescript-eslint/parser'

这使得ESLint能够理解TypeScript的语法。

这是必需的，否则ESLint将在解析TypeScript代码时抛出错误，就像它是常规的JavaScript一样。
@typescript-eslint/eslint-plugin (opens new window)

这允许您在代码库中使用这些规则。
eslint:recommended是eslint内置的“推荐”配置-它打开了一个小的、合理的规则集，这些规则用来检测众所周知的最佳实践。

# 安装

yarn add --dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

# 配置

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: [
    '@typescript-eslint',
  ],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
};

1
2
3
4
5
6
7
8
9
10
11

# 搭配prettier使用

这个放在了prettier文章中讲了

上次更新: 2022/10/26, 16:57:52

← 前提规范 prettier→