前端规范(一)之ESlint以及@antfu/eslint-config

本文介绍: 本文将记录工作中eslint相关的内容，常用的配置、插件等；团队项目中规范尤其重要，否则合并代码的时候会有大量冲突出现；通过 eslint和vscode 工作区的set t in g.json 设置能有效的使团队的规范保持一致；

本文将记录工作中eslint相关的内容，常用的配置、插件等；
团队项目中规范尤其重要，否则合并代码的时候会有大量冲突出现；
通过 eslint和vscode 工作区的set t in g.js on 设置能有效的使团队的规范保持一致；

在介绍ESlint之前推荐一个项目，也就是Anth ony Fu大佬的开源项目ESlint的预设配置项目，可以省去一堆的配置，值得注意的是Anth ony Fu并不适用Pre t t ie r,可以看看大佬的下面这篇文章的介绍；

Why I don’t use Prettier (antfu.me)

只需简单的安装后在.eslint rc和 package.json文件中维护以下内容即可，简单快捷

[详细内容请查看@antfu/eslint–config](antfu/eslint-config: Anthony’s ESLint config presets (github.com))

pnpm add -D eslint @antfu/eslint-config

{
  "extends": "@antfu"
}

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

vscode 插件商城直接搜索Eslint，值得注意的是我们还需要在项目中适用npm 安装ESlint，因为我们需要对我们的代码进行检测

npm i eslint -D

npx eslint --init

module.exports = {
    "env": {
        "browser": true, // 支持浏览器环境的检测
        "es2021": true, // 支持es2021语法的检测
        "node": true // 支持node环境的检测
    },
    "extends": [
        "eslint:recommended", // 使用eslint推荐的配置进行检测
        "plugin:vue/vue3-essential", // 支持vue3相关语法的检测
        'plugin:@typescript-eslint/recommended' //ts推荐进行配置
    ],
    "overrides": [
    ],
    'parser': 'vue-eslint-parser',
    "parserOptions": {
        "ecmaVersion": "latest", // 解析文件的时候使用最新的ecmaVersion
        "sourceType": "module", // 文件是ES6模块规范
        'parser': '@typescript-eslint/parser',
    },
    "plugins": [
        "vue",
        '@typescript-eslint'
    ],
    "rules": { // 配置自己项目特有的一些检测规则
        quotes: ['error','single'] //单引号示例
    }
}

{
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.eslint": true
    },
}

 "scripts": {
    "dev": "vite",
    "build": "vue-tsc &amp;&amp; vite build",
    "preview": "vite preview",
    "lint:eslint": "eslint --cache --max-warnings 0  "{src,mock}/**/*.{vue,ts,tsx}" --fix"
  },

npm run lint:eslint

npm install -D eslint-plugin-prettier eslint-config-prettier

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

eslint 前端规范

ESlint

@antfu/eslint–config预设配置(推荐)

安装

初始化

vscode 工作区设置

package.json增加脚本

运行脚检测 脚本

与Prettier冲突的解决 方法

冲突 场景举例

冲突现象

解决方法

发表回复取消回复

ESlint

@antfu/eslint–config预设配置(推荐)

vscode工作区设置

package.json增加脚本

运行脚检测脚本

与Prettier冲突的解决方法

冲突场景举例

冲突现象

解决方法

相关文章

发表回复 取消回复

vscode 工作区设置

发表回复取消回复