[{"data":1,"prerenderedAt":393},["ShallowReactive",2],{"page-\u002Fvue\u002Feslint":3},{"id":4,"title":5,"body":6,"description":385,"extension":386,"meta":387,"navigation":388,"path":389,"seo":390,"stem":391,"__hash__":392},"content\u002FVue\u002Feslint.md","Eslint",{"type":7,"value":8,"toc":371},"minimark",[9,17,22,56,60,67,88,92,104,110,120,124,158,162,167,173,177,183,187,194,200,203,217,221,251,254,261,267,270,274,341,345],[10,11,12,16],"p",{},[13,14,15],"strong",{},"ESLint"," 是一个广泛使用的 JavaScript 和 TypeScript 静态代码分析工具，它的主要功能是帮助开发者识别和修复代码中的问题，确保代码质量符合团队或项目的标准。它通过检查代码中的潜在错误、风格问题和不符合规范的写法，提供了自动化的代码检查功能。",[18,19,21],"h3",{"id":20},"eslint-的主要特点","ESLint 的主要特点",[23,24,25,32,38,44,50],"ol",{},[26,27,28,31],"li",{},[13,29,30],{},"静态代码分析","： ESLint 通过静态分析 JavaScript 或 TypeScript 代码，发现潜在的错误或不符合规范的写法，比如变量未定义、函数未使用、代码重复、命名不规范等问题。",[26,33,34,37],{},[13,35,36],{},"可配置性强","： ESLint 提供了丰富的配置选项，你可以根据项目需要自定义规则。规则可以根据团队的编码风格来设置，比如是否使用分号、是否允许单引号、是否强制使用箭头函数等。",[26,39,40,43],{},[13,41,42],{},"插件和扩展","： ESLint 支持通过插件来扩展功能，可以使用不同的插件来支持额外的检查功能，比如支持 React、Vue、TypeScript 等框架的规则，甚至可以检查更复杂的代码质量问题。",[26,45,46,49],{},[13,47,48],{},"自动修复功能","： ESLint 具有自动修复功能，可以自动修复一些简单的代码问题，如格式化、修复拼写错误、删除多余的空行等。这对于提升开发效率非常有帮助。",[26,51,52,55],{},[13,53,54],{},"集成到开发工具中","： ESLint 可以与许多开发工具集成，如 VS Code、WebStorm、Sublime Text 等编辑器，也可以与持续集成工具（如 Jenkins、GitHub Actions）集成。",[18,57,59],{"id":58},"eslint-的工作原理","ESLint 的工作原理",[10,61,62,63,66],{},"ESLint 使用 ",[13,64,65],{},"规则"," 来分析代码，并根据这些规则识别代码中潜在的问题。这些规则可以是内置的，也可以是通过插件扩展的。每个规则都可以设置为：",[68,69,70,76,82],"ul",{},[26,71,72,75],{},[13,73,74],{},"error","：表示规则违规时会报错，通常会阻止提交代码或构建。",[26,77,78,81],{},[13,79,80],{},"warn","：表示规则违规时仅警告，允许代码提交或构建。",[26,83,84,87],{},[13,85,86],{},"off","：关闭该规则。",[18,89,91],{"id":90},"常见的-eslint-配置文件","常见的 ESLint 配置文件",[10,93,94,95,99,100,103],{},"ESLint 的配置文件通常是 ",[96,97,98],"code",{},".eslintrc"," 或 ",[96,101,102],{},".eslintrc.json"," 文件，配置文件用来定义代码风格规范和规则。配置文件可以是 JSON 格式、YAML 格式或者 JavaScript 格式。",[10,105,106,107,109],{},"例如，最常见的 ",[96,108,102],{}," 配置文件：",[111,112,117],"pre",{"className":113,"code":115,"language":116},[114],"language-text","{\n  \"env\": {\n    \"browser\": true,\n    \"node\": true,\n    \"es2020\": true\n  },\n  \"extends\": [\"eslint:recommended\", \"plugin:react\u002Frecommended\"],\n  \"parserOptions\": {\n    \"ecmaVersion\": 12,\n    \"sourceType\": \"module\"\n  },\n  \"rules\": {\n    \"no-console\": \"warn\",\n    \"eqeqeq\": \"error\",\n    \"react\u002Fprop-types\": \"off\"\n  }\n}\n","text",[96,118,115],{"__ignoreMap":119},"",[18,121,123],{"id":122},"配置项解释","配置项解释：",[68,125,126,132,146,152],{},[26,127,128,131],{},[13,129,130],{},"env","：定义环境变量，告诉 ESLint 代码运行在哪些环境下（如浏览器、Node.js）。",[26,133,134,137,138,141,142,145],{},[13,135,136],{},"extends","：继承其他规则配置（如 ",[96,139,140],{},"eslint:recommended"," 表示继承 ESLint 的推荐规则，",[96,143,144],{},"plugin:react\u002Frecommended"," 表示继承 React 插件的推荐规则）。",[26,147,148,151],{},[13,149,150],{},"parserOptions","：配置代码解析的选项，如 ECMAScript 版本和模块类型等。",[26,153,154,157],{},[13,155,156],{},"rules","：自定义或覆盖规则，指定具体的规则和对应的错误级别。",[18,159,161],{"id":160},"安装-eslint","安装 ESLint",[163,164,166],"h4",{"id":165},"_1-全局安装不推荐","1. 全局安装（不推荐）",[111,168,171],{"className":169,"code":170,"language":116},[114],"npm install -g eslint\n",[96,172,170],{"__ignoreMap":119},[163,174,176],{"id":175},"_2-项目本地安装推荐","2. 项目本地安装（推荐）",[111,178,181],{"className":179,"code":180,"language":116},[114],"npm install --save-dev eslint\n",[96,182,180],{"__ignoreMap":119},[18,184,186],{"id":185},"初始化-eslint","初始化 ESLint",[10,188,189,190,193],{},"ESLint 提供了一个初始化命令 ",[96,191,192],{},"eslint --init","，可以帮助你生成一个基本的配置文件。运行以下命令时，ESLint 会根据提示生成一个配置文件：",[111,195,198],{"className":196,"code":197,"language":116},[114],"npx eslint --init\n",[96,199,197],{"__ignoreMap":119},[10,201,202],{},"它会问你一些问题，比如：",[68,204,205,208,211,214],{},[26,206,207],{},"使用 JavaScript 还是 TypeScript？",[26,209,210],{},"使用 React 吗？",[26,212,213],{},"使用哪种风格规范（例如 Airbnb、Google）？",[26,215,216],{},"是否需要安装一些依赖？",[18,218,220],{"id":219},"使用-eslint-检查代码","使用 ESLint 检查代码",[23,222,223,235],{},[26,224,225,228,229],{},[13,226,227],{},"手动检查文件："," 你可以通过命令行检查单个文件或整个项目的代码：",[111,230,233],{"className":231,"code":232,"language":116},[114],"npx eslint yourfile.js\n",[96,234,232],{"__ignoreMap":119},[26,236,237,240,241,247,250],{},[13,238,239],{},"检查整个项目："," 使用下面的命令来检查整个项目的代码：",[111,242,245],{"className":243,"code":244,"language":116},[114],"npx eslint .\n",[96,246,244],{"__ignoreMap":119},[248,249],"br",{},"这会检查当前目录及其子目录中的所有 JavaScript 文件。",[18,252,253],{"id":253},"自动修复代码",[10,255,256,257,260],{},"ESLint 提供了 ",[96,258,259],{},"--fix"," 选项，可以自动修复一些可以修复的问题，例如格式化、去除多余的空格等：",[111,262,265],{"className":263,"code":264,"language":116},[114],"npx eslint . --fix\n",[96,266,264],{"__ignoreMap":119},[10,268,269],{},"这会自动修复符合 ESLint 规则的代码问题。",[18,271,273],{"id":272},"集成-eslint-到开发环境","集成 ESLint 到开发环境",[23,275,276,296],{},[26,277,278,281],{},[13,279,280],{},"在 VS Code 中集成 ESLint：",[68,282,283,289],{},[26,284,285,286,288],{},"安装 ESLint 插件：打开 VS Code，进入 Extensions（扩展）面板，搜索并安装 ",[96,287,15],{}," 插件。",[26,290,291,292,295],{},"配置自动修复：在 VS Code 的设置中启用 ",[96,293,294],{},"eslint.autoFixOnSave","，以便在保存时自动修复代码中的问题。",[26,297,298,301,302,305,306,309,310,312,313,319,321,322,325,326,332,334,335,337,338,340],{},[13,299,300],{},"在 Git 提交前进行 ESLint 检查（使用 Husky 和 lint-staged）","： 你可以结合 ",[13,303,304],{},"Husky"," 和 ",[13,307,308],{},"lint-staged"," 在 Git 提交前自动运行 ESLint。",[248,311],{},"安装：",[111,314,317],{"className":315,"code":316,"language":116},[114],"npm install --save-dev husky lint-staged\n",[96,318,316],{"__ignoreMap":119},[248,320],{},"配置 ",[96,323,324],{},"package.json","：",[111,327,330],{"className":328,"code":329,"language":116},[114],"{\n  \"husky\": {\n    \"hooks\": {\n      \"pre-commit\": \"lint-staged\"\n    }\n  },\n  \"lint-staged\": {\n    \"*.js\": \"eslint --fix\"\n  }\n}\n",[96,331,329],{"__ignoreMap":119},[248,333],{},"这样，每次提交代码前，Husky 会运行 ",[96,336,308],{},"，",[96,339,308],{}," 会自动检查并修复 staged 文件中的代码问题。",[18,342,344],{"id":343},"常见的-eslint-插件和扩展","常见的 ESLint 插件和扩展",[23,346,347,353,359,365],{},[26,348,349,352],{},[13,350,351],{},"eslint-plugin-react","：用于 React 项目的 ESLint 插件。",[26,354,355,358],{},[13,356,357],{},"eslint-plugin-import","：用于检查模块导入\u002F导出的规范性。",[26,360,361,364],{},[13,362,363],{},"eslint-plugin-jsx-a11y","：用于增强 JSX 代码的可访问性。",[26,366,367,370],{},[13,368,369],{},"eslint-config-airbnb","：Airbnb 的 JavaScript 风格指南，包含大量的 ESLint 规则。",{"title":119,"searchDepth":372,"depth":372,"links":373},2,[374,376,377,378,379,380,381,382,383,384],{"id":20,"depth":375,"text":21},3,{"id":58,"depth":375,"text":59},{"id":90,"depth":375,"text":91},{"id":122,"depth":375,"text":123},{"id":160,"depth":375,"text":161},{"id":185,"depth":375,"text":186},{"id":219,"depth":375,"text":220},{"id":253,"depth":375,"text":253},{"id":272,"depth":375,"text":273},{"id":343,"depth":375,"text":344},"ESLint 是一个广泛使用的 JavaScript 和 TypeScript 静态代码分析工具，它的主要功能是帮助开发者识别和修复代码中的问题，确保代码质量符合团队或项目的标准。它通过检查代码中的潜在错误、风格问题和不符合规范的写法，提供了自动化的代码检查功能。","md",{},true,"\u002Fvue\u002Feslint",{"description":385},"Vue\u002Feslint","KFov6XtdsjbAg_hw1ZWPMniO-2iN1NtWFWP5cvrscJA",1791042467466]