ESLint的安装与使用
Introduce
- eslint是一个代码规范的格式化工具,当你写的语法不合规范,她会强制报错。
- eslint一般是作为vscode的插件使用,所以你可以很容易的在vs插件库里搜索到
- eslint是需要配置的,这里的配置分成两个意思。第一,你需要配置你引入eslint的方式,第二,你需要配置eslint的语法规范
Reasons
- 希望规范化自己的代码,不要有些时候换行,有些时候不换行,使用统一的规范
- 当自己代码中语法错误的时候,可以及时查看自己的错误
- 日常写代码。并没有引入vue,所以网上的通过vue引入的教程不适合我
solution
我不知道是不是我电脑是mac所以和windows不一样的原因,查看了很多网上的教程,艰难而又痛苦的安装下来了
-
全局安装
前提是你安装了npm,嗯哼,你不知道npm是啥? 没关系,下面代码第一行。
$ npm install //安装npm $ npm install -g eslint //安装eslint
好的,安装完成后你可以
eslint --init
会在你的项目里看到一个 .eslintrc.js文件
打开的话,你可以看到
module.exports = { 'env': { 'browser': true, 'es6': true, 'jquery': true }, 'extends': 'eslint:recommended', 'parserOptions': { 'ecmaVersion': 2018, 'sourceType': 'module' }, 'rules': { 'indent': [ 'error', 'tab' ], 'linebreak-style': [ 'error', 'unix' ], 'quotes': [ 0, 'single' ], 'semi': [ 'error', 'always' ], 'no-console' :[ 0 ], 'no-undef' : [ 1 ], 'no-unused-vars' : [ 1 ] } };
- env是你需要配置的环境,设置为true就是在这个环境启用。比如es6:true就是在es6之下是用eslint来检测代码的。
- extends是官方给的一种方式,比如我用的就是官方推荐的一些规则。
- 学前端的大概知道在css样式中id的权重是远远大于class的,在eslint也是类似的。你在rule里面写的任何规则都可以覆盖上一条官方推荐的,规则建议你查看官方的备注,毕竟太多了,查到具体的规则之后,你只需要在rule中添加就可以,比如0是关闭规则,1是警告,2是错误。
-
我想你大概会和我一样,不喜欢每次都进行这样繁琐的操作,所以你可以打开你的vscode,在vscode的preference中选择setting(vscode更新挺快的。。就不具体阐述怎么找了,也不是什么难事)。然后打开setting.json,增加几句
"eslint.options": { "configFile": "/Users/muyi/Desktop/web/lib/.eslintrc.js" },
你把第一步配置好的.eslintrc.js文件放到一个你不会修改删除的文件夹下,然后在configFile中设置你.eslintrc.js的路径。就完成了,以后只要你创建任意项目,他都会去这个目录下加载这个eslint文件。当然提醒一下小白。点号开头的文件都是隐藏文件,如果你发现,你不知道如何查看这个文件。嗯。度娘欢淫你。
writer&contact
{
"name":"Jontyy" ,
"email": " jontyy@163.com"
}