1 eslint官网

https://eslint.bootcss.com/

2 vscode中tab设置

 老师建议tab都改成2，因为前端代码tab为4的话，代码往后缩的很快，不美观

3 利用vue-cli创建初始项目

 

4 了解eslint配置文件中的rules规则

 

 

5 js调试：浏览器Sources断点 & 代码中使用debugger

 期望执行到14行时停一下

 考虑到在.html中js代码较多的情况下，在浏览器中打断点不太方便，

可以直接在js代码中键入代码degubber进行打断点

 

6 初步了解ESLint的语法规则

 这种报错不是代码写错了，是代码风格格式不达标

 其他规则如：每个代码文件最后需要留有一个空行；每行代码后不允许有空格

7 了解常用的ESLint语法规则

http://doc.toutiao.liulongbin.top/

 尝试修改一下这个配置

注意修改完项目的配置文件，需要重启项目才能生效

8 配置vscode中eslint插件

 

"eslint.alwaysShowStatus": true,
  "prettier.trailingComma": "none",
  "prettier.semi": false,
  //每行文字个数超出此限制将会被迫换行
  "prettier.printWidth": 300,
  //使用单引号替换双引号
  "prettier.singleQuote": true,
  "prettier.arrowParens":"avoid",
  //设置.vue文件中，html代码的格式化插件
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.ignoreProjectWarning": true,
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "trailingComma": "none",
      "semi": false,
      "singleQuote": true,
      "arrowParents": "avoid",
      "printWidth": 300
    },
    "js-beautify-html": {
      "wrap_attributes": false
    }
  },
  //ESLint插件的配置
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }