diff --git "a/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/5.ESLint\350\257\255\346\263\225\350\247\204\345\210\231\346\217\222\344\273\266\351\205\215\347\275\256/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/5.ESLint\350\257\255\346\263\225\350\247\204\345\210\231\346\217\222\344\273\266\351\205\215\347\275\256/exercises.json" new file mode 100644 index 0000000000000000000000000000000000000000..0134e9aaed4937f9a2411149d06a7bb3614610e8 --- /dev/null +++ "b/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/5.ESLint\350\257\255\346\263\225\350\247\204\345\210\231\346\217\222\344\273\266\351\205\215\347\275\256/exercises.json" @@ -0,0 +1,7 @@ +{ + "type": "code_options", + "author": null, + "source": "exercises.md", + "notebook_enable": false, + "exercise_id": "969161f2a20c46d2a50cf9f25d2f3b3e" +} \ No newline at end of file diff --git "a/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/5.ESLint\350\257\255\346\263\225\350\247\204\345\210\231\346\217\222\344\273\266\351\205\215\347\275\256/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/5.ESLint\350\257\255\346\263\225\350\247\204\345\210\231\346\217\222\344\273\266\351\205\215\347\275\256/exercises.md" new file mode 100644 index 0000000000000000000000000000000000000000..8ef2979839a5d1506c3f3eb1fb50eaf9476415bd --- /dev/null +++ "b/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/5.ESLint\350\257\255\346\263\225\350\247\204\345\210\231\346\217\222\344\273\266\351\205\215\347\275\256/exercises.md" @@ -0,0 +1,66 @@ +# ESLint语法规则插件配置 + +
小常识:
+
+ + 在我们使用Vue脚手架 创建项目时 尤其是团队共同开发项目时 会按照一个共同的代码规范来编程 创建Vue脚手架中有一个.eslintrc.js格式 但是在编程中我们通常会使用 shift+alt+f 进行代码格式化 但是由于格式化后的代码 与Vue中的.eslintrc规范不协调 尤其是 “” ; 以及空格的把控 +![在这里插入图片描述](https://img-blog.csdnimg.cn/20200507161958790.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70) +以上就是使用不同的代码规范格式代码后的结果 + +**解决办法:Eslint** + +配置Eslint +他是VScode中的一个插件 +#### 1.安装插件 +![在这里插入图片描述](https://img-blog.csdnimg.cn/20200507162345986.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70) + +#### 2.配置如下代码; +![在这里插入图片描述](https://img-blog.csdnimg.cn/20200507162601754.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70) + +``` + // 配置 eslint + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + }, + "eslint.format.enable": true, + //autoFix默认开启,只需输入字符串数组即可 + "eslint.validate": [ + "javascript", + "vue", + "html" + ], + "[vue]": { + "editor.defaultFormatter": "dbaeumer.vscode-eslint" + } +``` + +**此时,编写 vue 文件时 编写时,就会自动的按照eslint标准语法进行检测,并标注错误 保存代码时,会自动按照 eslint 语法要求对代码进行修复** + + + +
+ +
小测试:
+ + + + +关于ESLint以下说法不正确的是?

+ +## 答案 + +对 .eslintrc.js 文件进行修改 ,不需要重启 + +## 选项 + +### A + +可以使用Eslint插件来辅助开发 + +### B + +ESLint会强制在对象字面量的属性中键和值之间使用一致的间距 + +### C + +ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则