在日常工作中，我们会接触到各种各样的项目。如果项目使用的技术架构不同，可能会有相应的不同代码规范。每个人的编码习惯都不一样，短时间内很难改变。这就是为什么我们在开发新项目时经常会遇到各种规范错误的原因。这时候，如果我们能有一套配置，写代码的时候就不用考虑项目的规则了。我们只要保存，就可以根据当前项目配置的规则，自动修复所有的错误，这无疑会大大增加我们的开发体验。和效率。下面我将详细说明为了达到这个目的我们需要做什么，以及各种规格的基本配置。EditorConfig首先我们需要一个基本的规范，比如缩进，如何换行等等。它必须与所有团队、所有语言、所有编辑一起工作。EditorConfig可以帮助我们实现这一点。它使所有开发人员在基本编码标准上保持一致。我们需要做的是：安装EditorConfig插件（部分编辑器默认支持EditorConfig，请看这些编辑器不需要安装插件（https://editorconfig.org/#pre-installed））。配置.editorconfig文件。下面是.editorconfig的用法和示例：##当打开一个文件时，EditorConfig插件会在打开文件的目录和每个父目录中寻找一个名为.editorconfig的文件。##如果到达根文件路径或找到root=true的EditorConfig文件，则停止搜索.editorconfig文件。##如果没有配置root=true，EditorConfig插件会在项目外寻找.editorconfig文件##？匹配任何单个字符##[name]匹配给定字符串中的任何单个字符##[!name]匹配不在给定字符串中的任何单个字符##{s1,s2,s3}匹配任何给定字符串##{num1..nu??m2}匹配num1和num2之间的任何整数，其中num1和num2可以是正数或负数##例如规则[*.{js}]仅适用于.js文件生效。一般来说，我们配置[*]对所有文件生效。[*]##缩进方法。值可以是tab或spaceindent_style=space##缩进大小。当设置为tab时，它将取tab_width的值。indent_size=2##通常不需要设置。只有当indent_size=tab时才会生效。tab_width=2;##设置为lf、cr或crlf以控制换行符的表示方式。end_of_line=lf##设置为latin1、utf-8、utf-8-bom、utf-16be或utf-16le来控制字符集。charset=utf-8##设置为true以删除换行符之前的任何空白字符，设置为false以确保不会。trim_trailing_whitespace=true##设置为true保证文件保存时以换行符结尾，设置为false保证不以换行符结尾。inset_final_newline=trueEslint对于前端开发工程师来说，JavaScript无疑是我们最好的搭档。而ESLint，它是一个插件式的JavaScript代码静态检查工具，其核心是通过对解析得到的AST（AbstractSyntaxTree，抽象语法树）进行模式匹配来定位不符合约定规范的代码代码。社区中有很多不同版本的规范，每个团队也可能制定自己的规范。编码风格千千万万，项目配置却只有一种。多人协作时，难免会出现标准错误。我们需要配置一组规则，这样我们就不需要知道Care规则是什么。保存文件时，代码会根据工程规范自动格式化。怎么做？Eslint提供了风格指南规则，并明确哪些是可以修复的：StylisticIssues(https://cn.eslint.org/docs/rules/#stylistic-issues)我们需要做的是：在本地和社区安装Eslint推荐的规范是eslint-config-airbnb(https://github.com/airbnb/javascript)（其他规范也是可能的）。该插件将使用已安装的Eslint库（如果您没有安装它：npmieslinteslint-config-airbnb）。VSCode安装Eslint插件。添加.eslintrc.js配置文件。更改VSCode的setting.json文件的配置。其中，如果要按照项目的规则自动格式化，第四步必不可少。setting.json如果你安装了Eslint插件，按cmd+shift+p打开defaultSettings.json文件，按cmd+f搜索eslint可以看到VSCode中ESlint的所有默认配置。我们需要对其进行一些修改。仍然按cmd+shift+p打开settings.json文件。该文件为用户自定义配置，其中的配置会覆盖defaultSettings.json中的同名配置。我们在这个文件中对ESLint插件的配置进行一些修改，使其达到我们想要的效果。首先，我们要在保存的时候自动格式化。实现这个效果有3个配置：editor.formatOnSave+eslint.format.enable。前者配置：保存时格式化，后者配置：使用ESlint规则作为格式化标准。eslint.autoFixOnSaveeditor.codeActionsOnSave其中，第二个eslint.autoFixOnSave已经被弃用。使用它会提示更改为editor.codeActionsOnSave。第一个和第三个都可以实现，但是推荐使用第三个editor.codeActionsOnSave，支持更高的可配置性。使用editor.codeActionsOnSave时，我们需要禁用其他格式化程序，最好的方法是将ESlint设置为默认格式化程序。当我们这样做时，我们可以关闭editor.formatOnSave，否则我们的文件将被修复两次，这是不必要的。下面是我们需要在setting.json中添加的配置。（注释的地方是默认配置，不用加）//编辑或保存时是否检测，默认是编辑时检测。default:onType//"eslint.run":"onType",//default:false//"eslint.format.enable":false,//default:false//"editor.formatOnSave":false,"editor.codeActionsOnSave":{"source.fixAll.eslint":true},"[vue]":{"editor.defaultFormatter":"dbaeumer.vscode-eslint"},"[javascript]":{"editor.defaultFormatter":"dbaeumer.vscode-eslint"},//VSCode右下角状态栏始终显示ESLint字样，查看ESLint运行状态，确保ESLint正常运行"eslint.alwaysShowStatus":true,.eslintrc.js接下来说一下Chat.eslintrc.js文件。这个文件将指定我们的ESLint应该使用什么规则来规范我们的代码。我们往往不需要自己去配置这个文件，因为项目一般都会配置一套规则。我们只需要使用这组规则来格式化代码。但是了解每条规则的含义对我们来说也是非常重要的，比如你想自己新建一个项目。接下来，我将从常用的用法、Vue项目的具体配置、React项目的具体配置来看如何配置.eslintrc.js文件。常见用法ESLint默认支持ES5语法。我们可以覆盖此配置以启用对ES6、ES7的支持...(https://cn.eslint.org/docs/user-guide/configuring#specifying-parser-options)。//启用对es6语法和全局变量的支持{env:{es6:true,},}如果我们希望ESLint不仅仅识别浏览器环境的语法，其他环境（https://cn.eslint.org/docs/user-guide/configuring#specifying-environments)（比如Node）我们也想让它被识别，这时候我们可以这样配置：{env:{browser:true,node:true,},}在一些项目中，我们需要一个专门的解析器来解析我们的代码，是否符合规范。这时候我们可以在访问当前源文件中未定义的变量时使用Parser(https://cn.eslint.org/docs/user-guide/configuring#specifying-parser){parser:'babel-eslint',}，no-undef(https://cn.eslint.org/docs/rules/no-undef)规则会发出警告。如果你想在源文件中使用全局变量，建议你在ESLint(https://cn.eslint.org/docs/user-guide/configuring#specifying-globals)中定义这些全局变量，这样ESLint不会发出警告。no-undef规则将在访问当前源文件中未定义的变量时发出警告。如果你想在源文件中使用全局变量，建议你在ESLint中定义这些全局变量，这样ESLint就不会发出警告。{globals:{"__DEV__":true,"If":true,"For":true,"POBrowser":true},}ESLint支持第三方插件（https://cn.eslint.org/docs/user-指南/配置#配置插件）。在使用插件之前，您必须使用npm安装它。在配置文件中配置插件时，可以使用plugins关键字来存储插件名称列表。插件名称可以省略eslint-plugin-前缀。{plugins:['react-hooks','jsx-control-statements'],}ESLint自带大量规则。您可以使用注释或配置文件来修改要在项目中使用的规则（https://cn.eslint.org/docs/user-guide/configuring#configuring-rules）。要更改规则设置，您必须将规则ID设置为以下值之一：“off”或0-关闭规则“warn”或1-打开规则，使用警告级别错误：warn（不会导致程序退出）"error"或2-启用规则，使用错误级别','double']}}配置插件中定义的规则时，必须使用插件名称/规则ID格式。例如：{plugins:['react-hooks','jsx-control-statements'],rules:{'arrow-parens':0,'react-hooks/rules-of-hooks':'error','react-hooks/exhaustive-deps':'warn','jsx-control-statements/jsx-use-if-tag':0,'react/jsx-no-undef':['error',{'allowGlobals':true}],'no-prototype-builtins':'off',}}ESLint的配置规则太多。如果我们自己配置每条规则，工作量会非常大。我们可以直接使用已有的规范（https://cn.eslint.org/docs/user-guide/configuring#extending-configuration-files）。{extends:'zoo/react',}Vue特殊配置由于Vue单文件组件的特殊写法，对于Vue项目来说，需要一些特殊的ESLint配置来实现自动效果。语法高亮支持安装Vetur插件。使用ESLint代替Vetur进行代码检查Vetur为Vue项目带来了语法高亮和方便的操作。但它也会自动打开Vue文件的代码检测。这通常与我们配置的ESLint冲突。为了避免这种情况，你需要在VSCode的settings.json中做一些配置：//不允许它格式化代码"vetur.format.enable":false,//不允许它做代码检测"vetur.validation.template":false,"vetur.validation.script":false,"vetur.validation.style":false,eslint.validate中不需要添加vue，因为eslint.probe默认会检测vue类型的文件.然后，我们需要配置.eslintrc.js文件，其中使用的插件需要在本地安装。module.exports={root:true,//如果是SSR项目，需要配置node:trueenv:{browser:true,node:true,},//为什么要这样配置解析器？https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser解析器：'vue-eslint-parser'，parserOptions：{解析器：'babel-eslint'，}，扩展:[//如果是nuxt.js脚手架项目，需要安装相应的插件，并做如下配置'@nuxtjs','plugin:nuxt/recommended',//让eslint可以规范vue文件'plugin:vue/base',//需要使用vue3项目。如果是vue2项目，使用plugin:vue/recommended'plugin:vue/vue3-recommended',],plugins:[//注意这里不能配置html选项，为什么呢？https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files'vue',],//配置自己的规则覆盖上面继承的规则规则：{//配置js的缩进为2，switchcase语句的case也使用2个空格缩进indent:['error',2,{SwitchCase:1}],//使用eslint检测中的代码模板，这里我配置2个空格缩进'vue/html-indent':['error',2],},};可以根据自己的项目特点删除上面的配置。比如你的项目不是nuxt.js的，你可以去掉extends中的'@nuxtjs和plugin:nuxt/recommended。如果项目是Vuecli创建的，没有使用ts，需要在项目根目录添加jsconfig.json文件。jsconfig的配置在这里：jsconfig(https://code.visualstudio.com/docs/languages/jsconfig)React特殊配置在React项目中，由于是.js文件，一般不需要特殊配置。但即便如此，我们仍然需要对JSX和Hooks的使用规则做一些事情。ReactHookslint规则究竟执行了什么？(https://zh-hans.reactjs.org/docs/hooks-faq.html#what-exactly-do-the-lint-rules-enforce)eslint-plugin-hooks是在React源码目录packages中提供的一个包.它执行Hooks规则并且是HooksAPI的一部分。npmieslint-plugin-reack-hooksin.eslintrc.jsmodule.exports={//eslint-plugin可以缩写为plugins:['react-hooks'],}对于JSXJSX只是React的语法糖，并且它最终的All会被React调用React.createElement编译成ReactElement的形式。所以在17版本之前，如果我们使用JSX但没有引入React，那么在使用JSX时会提示'React'mustbeinscope。在17版本之后，React配合Babel和TypeScript编译器，将转换任务交给编译器自动转换。如果我们是之前的转换版本，需要获取对JSX的语法支持，需要安装eslint-plugin-react，它内置了对JSX的代码规范检测。{extends:['plugin:react/recommended'],}如果不想使用内置规则，我们也可以自定义规则{plugins:['react'],parserOptions:{ecmaFeatures:{jsx:true,},},rules:{'react/jsx-no-undef':['error',{"allowGlobals":true}],},}如果是新转换的版本，需要做一个为了使用JSX的小改动，我们不会被要求引入React。{extends:['plugin:react/recommended','plugin:react/jsx-runtime'],}StyleLint完成以上配置后，我们就可以实现.js文件和.vue文件的模板和脚本模块的代码规范和保存时自动格式化。但是对于.css、.less、.scss文件和.vue文件的样式模块，我们需要额外配置，否则样式部分不规范，无法自动检测修复。我们需要做的就是：npmistylelintstylelint-config-standardstylelint-scss。安装Stylelint插件。配置.stylelintrc文件。配置VSCode的setting.json文件。其中，第四步也是必须的，我们需要做如下配置：validate":false,"less.validate":false,"scss.validate":false,//保存时使用eslint和stylelint修复"editor.codeActionsOnSave":{"source.fixAll.eslint":true,"source.fixAll.stylelint":true},//默认会检测很多文件，这是不必要的，我们只让他检测样式"stylelint.validate":["css","html","less","postcss","sass","scss","source.css.styled","styled-css",]]以上，我们的目的就达到了！更漂亮的代码格式化工具。很多同学都接触过这个工具。我个人对这个工具有很深的了解。以下是我个人的看法。我们来看一段来自Prettier的官方介绍。那么为什么选择“更漂亮的风格指南”而不是任何其他随机风格指南呢？因为Prettier是唯一一个全自动的“风格指南”。即使Prettier没有按照您喜欢的方式100%格式化所有代码，考虑到Prettier的独特优势，“牺牲”也是值得的，您不觉得吗？可以看出，这个工具是为了让不同公司的不同团队自动保存和格式化而无需考虑代码规范的。牺牲个人内容。然而，不同的团队经常使用不一致的规则。如果所有的文件都强制使用prettier自动格式化，会与公司配置的代码规范检查工具（如ESLint）发生冲突。实际表现是自动保存后，仍然出现ESLint格式错误。为了让prettier生效，我们需要在VSCode中配置：//所有文件都使用prettier格式化"editor.defaultFormatter":"esbenp.prettier-vscode",//仅对js文件使用prettier[javascript]":{"editor.defaultFormatter":"esbenp.prettier-vscode"}//所有文件不指定自动格式化方式"editor.defaultFormatter":null,//js文件不指定自动格式化方式"[javascript]":{"editor.defaultFormatter":null}你可以使用.prettierrc文件、VSCode的setting.json、.editorConfig来配置prettier。推荐使用prettier对不常用的文件进行格式化。js、json、jsx、html、css、less、vue等文件采用统一工程规范进行格式化。所以，我认为卸载它是完全可以的。不知道你怎么看？以上就是全部内容，希望对大家有所帮助~
