ESLint是一个避免低级错误和统一代码风格的QA工具

ESLint的用途

1.检查代码是否符合编码标准和统一的代码样式；

2.检查代码的语法错误；

中文网址http://eslint.cn/

VSCode编译器在Vue项目中的使用

选择在初始化项目时是否使用

ESLint管理代码(默认情况下选择y将其打开)

使用ESLint来清理你的代码？(是/否)

默认情况下，这个标准为https://github。com/standard/standard/blob/master/docs/rules-使用了zhcn.md

以下是的详细说明。editorconfig，eslintignore和。eslintrc.js文件。editorconfig文件(主要用于配置IDE)

标准化缩进样式、缩进大小、制表符长度、字符集等。并解决不同IDE的编码标准设置。EditorConfig插件将找出是否存在。当前编辑文件所在的文件夹或其父文件夹中的editorconfig文件。如果是这样，编辑器的行为将与。editorconfig文件，其优先级将高于编辑器自己的设置。

Root=true#对所有文件有效/[*js]仅对js文件有效[*] #设置编码格式charset=utf-8#缩进类型可选空格和tabindent _ style=空格#缩进量可选整数值2或4， 或者tabindent _ size=2 #换行符end_of_line的格式=lf#是否在文件末尾插入空行可以从true和false中选择insert _ final _ newline=true #是否删除行尾的空格可以从true和false中选择trim _ trailing _空白=true。 eslintignore文件(需要被eslintare忽略的文件仅对有效。js文件。

/build//config//dist//src/utils//src/router/* . js . eslintrc . js文件(用于配置eslint的检查规则)

Module.exports={//此项用于告诉eslint在查找当前配置文件时，不要从其父级找到root3360true。//此项用于指定eslint解析器，解析器必须符合规则。Babel-EsLit解析器包装babel解析器，用EsLit解析parser :“babel-EsLit”。//此项用于指定javaScript语言类型和样式，sourceType用于指定js导入模式。默认值为script，在这里设置为module。解析器选项： {源类型：' Module'}，//此项指定环境的全局变量，以下配置被指定为浏览器环境env: {browser: true，}。//https://github.com/feross/standard/blob/master/rules . MD # JavaScript-standard-style//这个项目是用来配置标准js样式的，也就是说在编写代码的时候，要用标准的方式编写。如果用vs-code，我觉得可以避免错误。Extends: '标准'，//需要lint *。vuefiles//这个项目是用来提供插件的，插件名称省略了eslint-plugin-。以下配置用于标准化html插件： ['html']。//在此添加自定义规则//以下规则用于设置插件的规范代码，必须删除前缀eslint-plugin- //的内容。主要有以下设置规则。您可以设置字符串或数字，它们具有相同的效果。//“off”-0关闭规则//“warn”-1打开警告规则//“error”-2打开错误规则//了解以上内容，相信以下代码能够清楚地理解规则： {//allowansync-aware ' generator-star-spacing ' : ' off '，//开发过程中的allowandebugger ' no-debugger ' : process . env . node _ env==' production '？错误' : 'off '，//js语句必须以分号' semi': ['off '，' always']结尾，//三重等号' eqeqeq': 0，//在comments//*中强制使用一致空格' spaced-comment '。//在关键字后使用一致的空格' keyword-spacing' : 0，//在函数的左括号前强制使用一致的空格' space-before-function-paren ' : 0，//引号类型' quotes': [0，' single']，//从不出现未使用的变量//' no-unused-vars ' : 0 0，//要求或禁止逗号' comma-dance ' 3360 { 0 } }“off”在结尾或0-关闭规则“warn”或1

1.在目录中添加编辑配置。eslintric . js , eslintingnore这三个文件

2.在package.json的"开发依赖关系"中加入ESlint所需要的包

巴贝尔-埃斯林' : '^7.1.1','埃斯林' : '^3.19.0','埃斯林-配置-标准' : '^10.2.1','埃斯林-友好-格式化程序' : '^3.0.0','埃斯林-加载程序' : '^1.7.1','埃斯林-插件-html': '^3.0.0','埃斯林-插件-导入' : '^2.7.0','埃斯林-插件-节点' : '^5.2.0','埃斯林-插件-承诺' : ' 3 .4 .0 ','埃斯林在bulid/webpack.base.conf.js文件中加入ESlint规则并生效

//在组件的规则中加入模块： {规则s 3360 [{测试：/ .(js|vue)$/，loader : ' esint-loader '，enforce: 'pre '，include: [resolve('src ')，resolve('test')]，选项： { formatter : required(' esint-friendly-formatter ')，//不符合Eslint规则时只警告（默认运行出错)//发出warn :配置。戴夫。showesinterrosinoverlay } }，] }4 .重新建造代码运行，完美生效！

推荐三个开发工具插件

ESLint(只支持高亮显示射流研究…文件)编辑配置类型（代码错误提示)常见的报错

文件末尾存在空行（停产-最后)

缺少分号(“semi”:[”错误"、"始终"])

关键字后面缺少空格

字符串没有使用单引号(' quotes': [1，' single'])

缩进错误

没有使用全等(eqeqeq)

导入组件却没有使用

新的了一个对象却没有赋值给某个常量（可以在该实例前添加此代码/ESL int-禁用无新/忽略ESLint的检查)

超过一行空白行（无多空行)

注释符//后面缩进错误（围绕注释的线条)

开发工具

用户配置

{ '工作台。startupeditor ' : '新无标题文件'，//以下是按照ESLint格式化代码维特。格式。defaultformatter。js ' : ' vs代码类型脚本'，' JavaScript。格式。insertspacebeforeffectionactile ' : true '，'编辑器。quick suggestions ' : { ' strings ' : true '，' editor.tabSize': 2 '，eslit。validate ' :[' JavaScript '，' javascriptreact '，' html '，' vue '，{ ' language ' : ' html '，' auto防止格式化代码后单引号变双引号//'更漂亮。单引号' : true '，文件。延迟后自动保存' : '，' files.autoSaveDelay ' : 1500，//' git。确认同步' : false//配置是否从更新通道接收自动更新。更改后需要重启update.channel': 'none'}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。