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": " [email protected]"
}

gitHub

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