vscode编辑器vue项目格式化代码
使用Vue开发项目的时候,开启ESlint校验后有各种头疼的报错,即便与同事约定好了一些代码编写规范,偶尔也会有一些遗漏的时候,不过可以通过一些扩展插件来自动格式化代码,来避免一些低级bug的产生。总体分三步:第一步:依次下载以下三个扩展插件,当然如果开发vue项目其他两个也是很有必要的。第二步:打开编辑器中用户设置的settings.json文件,在后面添加如下关于格式化格则...
·
使用Vue开发项目的时候,开启ESlint校验后有各种头疼的报错,即便与同事约定好了一些代码编写规范,偶尔也会有一些遗漏的时候,不过可以通过一些扩展插件来自动格式化代码,来避免一些低级bug的产生。
总体分三步:
-
第一步:
依次下载以下三个扩展插件,当然如果开发vue项目其他两个也是很有必要的。
-
第二步:
打开编辑器中用户设置的settings.json文件,在后面添加如下关于格式化格则的代码// #让函数(名)和后面的括号之间加个空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": false, "explorer.confirmDragAndDrop": false, "javascript.preferences.quoteStyle": "single", "typescript.preferences.quoteStyle": "single", // tab 大小为2个空格 "editor.tabSize": 2, // 100 列后换行 "editor.wordWrapColumn": 100, // 保存时格式化 "editor.formatOnSave": true, // 开启 vscode 文件路径导航 "breadcrumbs.enabled": true, // prettier 设置语句末尾不加分号 "prettier.semi": false, // prettier 设置强制单引号 "prettier.singleQuote": true, // 注释后面加空格 "prettier.eslintIntegration": true, // 选择 vue 文件中 template 的格式化工具 "vetur.format.defaultFormatter.html": "prettyhtml", // 显示 markdown 中英文切换时产生的特殊字符 "editor.renderControlCharacters": true, // 设置 eslint 保存时自动修复 "eslint.autoFixOnSave": true, // eslint 检测文件类型 "eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix": true } ], // vetur 的自定义设置 "vetur.format.defaultFormatterOptions": { "prettier": { "singleQuote": true, "semi": false } }
-
第三步:
如果不出意外,以上两步是可以完成保存时自动格式化代码的功能,不过有些同学可能不太习惯函数圆括号之前没有空格,那就把第二步中的"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
删除掉就好了。喜欢的同学只需要关闭Eslint关于函数括号的错误提示就好了。比如在.eslintrc.js中添加如下代码:// allow async-await 'generator-star-spacing': 'off', // 函数圆括号之前没有一个空格 "space-before-function-paren": ["error", "never"]
over
更多推荐
已为社区贡献1条内容
所有评论(0)