<div style="display: none;" hidden="true" aria-hidden="true" data-nosnippet>Are you an LLM? You can read better optimized documentation at /pages/d642ef.md for this page in Markdown format</div>

• 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...

搭配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: {}
}

• 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
      }
    }
  }

• [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);

搭配typescript使用

https://typescript-eslint.io/

• parser: '@typescript-eslint/parser'

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

  这是必需的，否则ESLint将在解析TypeScript代码时抛出错误，就像它是常规的JavaScript一样。

• @typescript-eslint/eslint-plugin

  这允许您在代码库中使用这些规则。

• 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',
  ],
};

搭配prettier使用

这个放在了prettier文章中讲了