增加笔记

vue/Eslin和Prettier在Vscode中自动格式代码.md

+# vscode配置vue+vetur+eslint+prettier自动格式化功能
+
+> 2020年08月20日
+
+该配置用于vue开发，最终效果是保存时自动根据eslint对js、html和css代码进行格式化
+
+## vscode 安装插件
+
+Vetur
+
+![image-20200820155612127](./assets/image-20200820155612127.png)
+
+Eslint
+
+![image-20200820155654746](./assets/image-20200820155654746.png)
+
+Prettier
+
+![image-20200820155813851](./assets/image-20200820155813851.png)
+
+## 配置
+
+### vue-cli插件生成的代码
+
+生成时选择Eslint+Prettier
+
+![image-20200820160035882](./assets/image-20200820160035882.png)
+
+自定义规则设置,创建`.prettierrc`文件对prettier格式化进行自定义
+
+```js
+{
+ /* 单引号包含字符串 */
+ "singleQuote": true,
+ /* 不添加末尾分号 */
+ "semi": false,
+ /* 在对象属性添加空格 */
+ "bracketSpacing": true,
+ /* 优化html闭合标签不换行的问题 */
+ "htmlWhitespaceSensitivity": "ignore"
+}
+```
+
+配置settings.json文件
+
+```json
+"editor.codeActionsOnSave": {
+ "source.fixAll": true
+},
+/* 关闭编辑器自带保存格式化功能，此功能会用Vetur进行格式化。*/
+"editor.formatOnSave": false
+```
+
+
+
+
+
+
+
+
+
+### 非vue-cli生成的代码
+
+单独引入以下红框中的几个依赖
+
+![image-20200820160237409](./assets/image-20200820160237409.png)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+