懒人攻略（快速入门与使用总结）没时间了解更多？6步快速带你配置团队代码规范，抄作业是不是很有趣！安装VSCode插件：Prettier、ESLint、EditorConfig；拉取最新代码，执行npminstall，自动下载eslint、eslint-config-prettier、babel-eslint、prettier、eslint-config-prettier等依赖到本地；npminstalleslinteslint-config-prettierbabel-eslintprettiereslint-config-prettier--save-dev根据需要添加.prettierrc、.stylelintrc、.editorconfig等配置文件，规范团队代码。具体配置参考文末推荐配置。安装Pre-commitHook:npxmrmlint-staged执行gitcommit后，ESLint会检查格式并自动修复。对于无法自动修复的语法，它会警告并阻止commit；向package.json添加命令并使用npmrunlint检查语法和格式，使用npmrunlint--fix修复语法和格式"scripts":{"lint":"eslint--ext.js,.vuesrc","lint-fix":"eslint--fix--ext.js,.vuesrc/"}，全文结束！（手动funny.png）什么是ESLintESLint是一个开源的JavaScriptlinting工具，它使用espree将JavaScript代码解析成抽象语法树（AST），然后通过AST来分析我们的代码，并给我们两个提示：代码质量问题：使用方式可能有问题（problematicpatterns）代码风格问题：风格不符合某些规则（doesn'tadheretocertainstyleguidelines）官方文档：ESLint-插件式JavaScript代码检测工具-ESLint中文文档先决条件Node.js(>=6.14);npm版本3+。使用npminstalleslint--save-devinstallbabel-eslint安装ESLintnpminstallbabel-eslint--save-devinstalleslint-config-prettiernpminstalleslint-config-prettier--save-dev确保ESLint配置没有与Prettier配置冲突。安装后，ESLint不需要的规则和与Prettier冲突的规则会自动关闭；初始化ESLint配置文件使用eslint--init开始创建ESLint配置文件错误级别“关闭”或0-关闭规则“警告”或1-将规则视为警告（不影响退出代码）"error"or2-将规则视为错误（退出码为1）官方推荐规则使用"extends":"eslint:recommended"启用推荐规则，详见可用规则列表-ESLint中文文档配置说明Environments-指定脚本的运行环境。每个环境都有一组特定的预定义全局变量。全局-脚本在执行期间访问的其他全局变量。规则-启用的规则及其各自的错误级别。plugins-第三方插件Extends-继承Parser-解析器，ESLint默认使用Espree作为其解析器。parserOptions—通常用于设置解析器的一些配置。忽略ESLint的新.eslintignore文件，你可以通过在项目根目录下创建一个.eslintignore文件来告诉ESLint忽略特定的文件和目录。eslintignore文件是一个纯文本文件，每一行都是一个glob模式，指示应该忽略哪些路径检测。例如，下面将忽略所有JavaScript文件：**/*.js文件取消ESLint通用注释/*eslint-disable*/---禁用文件顶部的所有规则，整个文件范围都不会checked/*eslint-disableno-alert,no-console*/--禁用某些规则//eslint-disable-line--禁用当前行的规则//eslint-disable-next-line--禁用规则下一行命令行选项：eslint-h自动修复问题：eslint--fixdisable使用.eslintrc中的配置：eslint--no-eslintrc格式化单个文件或文件目录：eslint[options][file|dir|glob]*使用指定目录下的其他规则：eslant---rulesdir[path::String]只报错，默认false：eslint---quiet只检查有变化的文件，默认false：eslint---cacheexplicitlyformat报告文件的输出：eslint-o,--output-filepath::StringPrettier什么是Prettier？官方文档：Prettier上面我们提到ESLint主要解决两类问题，但实际上ESLint主要解决的是代码质量问题。另一类代码风格问题其实也不是完全由ESLint解决的，因为这些问题“没那么重要”。代码质量问题意味着程序有潜在的错误，风格问题充其量只是让人不舒服。这时，Prettier出现了。Prettier自称是一个自以为是的代码格式化程序（opinionatedcodeformatter）。Prettier认为格式很重要，所以相当于Prettier接管了两个问题的代码格式。使用Prettier+ESLint完全解决了两个问题。使用prettiernpminstall--save-dev--save-exactprettier安装eslint-config-prettierrnpminstall--save-deveslint-config-prettier确保ESLint配置与Prettier配置不冲突。安装后，ESLint不需要的规则和与Prettier冲突的规则会自动关闭；安装lint-stagednpxmrmlint-staged以将Prettier与预提交工具结合使用。这可以在提交之前通过gitadd重新格式化标记为“暂存”的文件。在安装之前，请确保Prettier已安装并位于devDependencies中。有关其他选项，请参阅https://prettier.io/docs/en/p...ignorePrettier使用.prettierignore文件完全忽略（即不重新格式化）某些文件和文件夹。#Ignoreartifacts:buildcoverage#IgnoreallHTMLfiles:*.html总结在你的编辑器中安装正确版本的Prettier插件，确保团队中每个人安装的版本一致；在项目本地安装正确版本的Prettier依赖，确保团队中的每个人都安装相同的版本；添加一个.prettierrc.json配置文件，告诉编辑器你正在使用Prettier；添加一个.prettierignore配置文件来告诉你的编辑器哪些文件不需要格式化；通过运行npxprettier—write。格式化整个项目的文件；通过运行npxprettier—check来检查每个项目文件的格式规范；使用eslint-config-prettier保证ESLint和Prettier可以完美配合；一次提交的代码是格式化的。EditorConfigEditorConfig官方文档是什么：EditorConfig主要是为了让多个开发者使用多个编辑器和IDE在同一个项目上工作时保持一致的编码风格。EditorConfig项目包括用于定义编码样式的文件格式和一组文本编辑器插件，使编辑器能够读取文件格式并遵循定义的样式。EditorConfig和ESLint侧重点不同。EditorConfig更偏向代码风格，定义和维护一致的编码风格。ESLint专注于检查Javascript编程语法错误，两者不冲突，可以一起使用，使代码风格更加优雅。推荐配置editorConfig配置：.editorConfig文件#EditorConfig很棒：https://EditorConfig.org#top-mostEditorConfigfile#适用范围：跨越编辑器和IDE编写代码，保持一致的简单代码样式#应该是的特殊属性在任何部分之外的文件顶部指定。设置为true以停止在当前文件上搜索.editorconfig文件。root=true#Unix风格的换行符以换行符结束每个文件[*]end_of_line=lf#设置为lf、cr或crlf以控制换行符的表示方式。insert_final_newline=true#设置为true以确保文件在保存时以换行符结尾，设置为false以确保它不会。#lib目录下所有JS的缩进覆盖[**.{js,vue,ts}]charset=utf-8#设置为latin1、utf-8、utf-8-bom、utf-16be或utf-16le来控制字符集。indent_style=space#设置为tab或space分别使用硬制表符或软制表符。indent_size=4#使用4个空格而不是制表符；trim_trailing_whitespace=true#保存时删除尾随空白字符[*.md]trim_trailing_whitespace=false#匹配package.json或.travis.yml[{package.json,.travis.yml}]indent_style=spaceindent_size=4Prettier配置：.prettierrc文件{"singleQuote":true,“semi”:true,“arrowParens”:“avoid”,“bracketSpacing”:true,“embeddedLanguageFormatting”:“auto”,“htmlWhitespaceSensitivity”:“css”,“insertPragma”:false,“jsxBracketSameLine”:false,“jsxSingleQuote":false,"printWidth":200,"proseWrap":"never","quoteProps":"as-needed","requirePragma":false,"tabWidth":4,"trailingComma":"none","useTabs":false,"vueIndentScriptAndStyle":false}ESLint配置：.eslintrc.js文件module.exports={env:{es6:true,browser:true,node:true,commonjs:true,amd:true},extends:['eslint:recommended','plugin:vue/essential','plugin:prettier/recommended'],parserOptions:{ecmaVersion:12,sourceType:'module',解析器:'babel-eslint'},插件:['vue','prettier'],rules:{'prettier/prettier':'error',indent:['error',4],'linebreak-style':['error','unix'],引用:['error','single'],semi:['error','always']}};VSCode编辑器扩展插件Prettier-Codeformatter-Prettier-VisualStudioMarketplaceVSCode代码格式化插件设置详细教程：GitHub-prettier/prettier-vscode:VisualStudioCodeextensionforPrettierVetur-VisualStudioMarketplaceESLint-VisualStudioMarketplaceEditorConfigforVSCode-VisualStudioMarketplaceReferences理解ESLint和Prettier-知乎我是一名佩奇厨子，现居上海，一名勤奋的前端攻城狮，热爱专研，热爱技术，热爱分享个人笔记，不易整理，再次感谢阅读、点赞、收藏和关注！如果对文章有任何疑问，欢迎留言指出，也欢迎大家一起交流学习！
