1.前言本文主要针对编辑器为sublime的Vue项目的eslint代码规范。Javascript是一种弱类型语言，因此语法检查变得尤为重要。虽然现在有很多前端IDE开发工具可以帮助我们提示写作中的错误，但是大多数开发者还是使用像SublimeText、VisualStudioCode这样的轻量级编辑器，这导致很容易出现各种错误，比如拼错单词、漏写等括号等。而且每个人的代码编写习惯不同，所以有些项目的代码格式差异很大，比如缩进空格的个数，有的习惯4个，有的习惯2个，这也让项目维护起来比较麻烦而且比较麻烦。也很难定位错误。因此，Javascript的语法检查工具应运而生，ESLint是目前使用最广泛的。本文将解释如何将ESLint集成到我们的项目中。二、实现过程1、**sublimetext3安装**1.1Sublimetext3安装，这个网上自行搜索安装方法1.2Sublime相关eslint插件安装，sublimelinter、sublimelinter-eslint2、vue项目创建2.1提供上Internet程序安装，这里是“vueinitwebpack”安装方式，会提示安装eslint，即选择哪种代码规范（这里选择airbnb-base）3.**npminstalleslint相关插件**3.1vue-plugin-vue/html3.2vue-eslint-parser3.3babel-eslint3.4airbnb-base(代码规范)4.**配置方案**本文主要通过配置***“.eslintrc实现eslint的代码.js”***要求。ESLint是高度可配置的，这意味着您可以根据项目需要自定义代码检查规则。ESLint可以通过以下两种方式进行配置：--**文件注释：**使用注释将配置内容包裹在Javascript文件中。--**配置文件（推荐）：**在项目根目录下创建包含检查规则的.eslintrc.*文件。三、sublimetext3的安装1、sublmie的安装可以参考以下地址进行安装https://blog.csdn.net/wxl1555/article/details/699414512。sublimie插件sublimelinter，eslint的sublimelinter-eslint4.创建VUE项目创建vue项目使用命令：`vueinitwebpack//初始化安装VUE项目projectname//输入项目名称projectdescription//Entertheprojectdescriptionauthor//Entertheauthorvuebuild//运行环境Installvue-routerUseESLinttolintyourcode(Yes/No)//选择YES，安装eslint插件（选择代码规范airbnb）设置upunittests(Y/N)....五、npminstalleslint相关插件在项目目录下，通过npm命令安装eslint相关插件airbnb-base（代码规范）目前，airbnb公司代码规范比较流行，目前主要使用“air-base”，安装依赖：npminstalleslinteslint-config-airbnb-baseeslint-plugin-importeslint-plugin-vue--save-dev也可以去eslit-aribnb安装地址https://www.npmjs.com/package...根据自己的需要安装。如果你使用vue项目安装方式，可以选择这个规范的babel-eslintbabel-eslint解析器是对babel解析器的一个包装，以便可以用ESLint进行解析vue-eslint-parser这个解析器主要是用来验证vue的vue文件的模板标签eslint-plugin-vue也验证了vue文件的内容，不能和eslint-plugin-html放在配置文件中，否则至少要放在这个插件后面。6、配置方案配置文件内容如下，可以根据自己的要求更改：.eslintrc.js文件配置内容虽然airbnb规范比较成熟，但是每个人都有一些要求，可以修改一些规则或根据需要添加//https://eslint.org/docs/user-guide/configuringmodule.exports={root:true,parser:"vue-eslint-parser",parserOptions:{"ecmaVersion":6,"parser":"babel-eslint","sourceType":"module","allowImportExportEverywhere":false},env:{browser:true,},//https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention//考虑切换到`plugin:vue/strongly-recommended`或`plugin:vue/recommended`以获得更严格的规则。extends:['plugin:vue/strongly-recommended','airbnb-base'],//需要lint*.vue文件plugins:['vue','vuefix',],//检查导入是否真的解析设置:{'import/resolver':{webpack:{config:'build/webpack.base.conf.js'}}},//在此处添加自定义规则rules:{//导入时不需要.vue扩展名'import/extensions':['error','always',{js:'never',vue:'never'}],'linebreak-style':'off','import/no-unresolved':0,'import/no-dynamic-require':'off','max-len':[0,120,2],'space-before-function-paren':["error",{"anonymous":"never","named":"always","asyncArrow":"always"}],//禁止重新分配函数参数//禁止参数对象操作，特定排除除外'no-param-reassign':['error',{props:true,ignorePropertyModificationsFor:['state',//forvuexstate'acc',//forreduceaccumulators'e'//fore.returnvalue]}],//allowoptionalDependencies'import/no-extraneous-dependencies':['error',{optionalDependencies:['test/unit/index.js']}],//在开发期间允许调试'no-debugger':process.env.NODE_ENV==='production'?'error':'off',//禁止使用控制台来调试程序，正在运行npmrunmyEslinting时，命令行不会输出no-consolewarning'no-console':'off',}}package.json文件配置在该文件的scripts中添加一行eslint验证，执行命令"scripts":{"myEslint":"eslint--ext.js,.vuesrc"}，当然你也可以全局安装上面的依赖，这样直接运行eslint--ext.js,.vuesrc命令就可以了，配置完成~在命令行myEslint运行npmrun，会发现一堆错误，不用担心，输出的错误描述很明显，根据错误提示的行号查看即可，然后根据规则进行更改。上述命令中，--ext参数用于指定要检查的扩展名文件，src是指定要检查的目录。7.小结在vue项目上使用ESLint其实还是比较简单的，但是对于知识和技能一知半解的人来说还是花了一些时间。不管是安装还是配置，eslint其实都比较人性化。要成为一名优秀的程序员，规范的代码风格是极其重要的。除了降低代码的错误率，对代码的可读性也有很大的帮助。另外，代码注释对于代码的可读性也是必不可少的。让eslint成为你写代码的好帮手。
