HMVue6.5【Eslint】

 

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系列辅助开发插件

 

 

 

 

vscode的settings.json中头部需要添加：

  //prettier配置路径
  "prettier.configPath": "C:\\Users\\yubaby\\.prettierrc",
  "prettier.trailingComma": "none",
  "prettier.semi": false,
  //每行文字个数超出此限制将会被迫换行
  "prettier.printWidth": 300,
  //使用单引号替换双引号
  "prettier.singleQuote": true,
  "prettier.arrowParens":"avoid",
  //vetur配置：设置.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插件的配置
  "eslint.alwaysShowStatus": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },

 

 在C:\Users\yubaby\路径下创建配置文件.prettierrc，在里面编写：

{
    "trailingComma": "none",
    "semi": false,
    "printWidth": 300,
    "singleQuote": true,
    "arrowParens":"avoid"
}

 

重启vscode生效

9 配置vscode中默认格式化文档的方式

 

 

 

 

 

 

 

.vue和.js中都将Prettier设置为默认的文档格式化程序

 

 

 

 

上述为手动格式化文档；或者ctrl+s保存文档时也会自动更正