ESLint的安装与使用

ESLint的安装与使用

Introduce

  1. eslint是一个代码规范的格式化工具,当你写的语法不合规范,她会强制报错。
  2. eslint一般是作为vscode的插件使用,所以你可以很容易的在vs插件库里搜索到
  3. eslint是需要配置的,这里的配置分成两个意思。第一,你需要配置你引入eslint的方式,第二,你需要配置eslint的语法规范

Reasons

  1. 希望规范化自己的代码,不要有些时候换行,有些时候不换行,使用统一的规范
  2. 当自己代码中语法错误的时候,可以及时查看自己的错误
  3. 日常写代码。并没有引入vue,所以网上的通过vue引入的教程不适合我

solution

我不知道是不是我电脑是mac所以和windows不一样的原因,查看了很多网上的教程,艰难而又痛苦的安装下来了

  1. 全局安装

    前提是你安装了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是错误。
  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"
}

gitHub

https://github.com/YJD199798/inputstyle.git

展开阅读全文

没有更多推荐了,返回首页