vscode 中对vue进行格式化

PascalXie 发布于2019-08-23 13:47 / 2502人阅读

摘要：开发环境安装插件常用配置对应四个值是不换行让使用的代码格式进行校验让中的按编辑器自带的格式进行格式化

开发环境

1. vscode

安装插件

vetur, prettier, editor,

常用配置

{
    "git.ignoredRepositories": [
    ],
    "eslint.validate": [
      "javascript",
      {
        "language": "vue",
        "autoFix": true
      },
      "javascriptreact",
      "vue"
    ],
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "window.zoomLevel": 1,
    "terminal.integrated.shell.windows": "",
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        // auto force force-aligned force-expand-multiline
        // 对应四个值 auto是不换行
        "wrap_attributes": "auto"
      },
      "prettyhtml": {
        "printWidth": 100,
        "singleQuote": false,
        "wrapAttributes": false,
        "sortAttributes": false
      }
    },
    "eslint.options": {
      "extensions": [".js", ".vue"]
    },
    "editor.quickSuggestions": {
      "strings": true
    },
    "javascript.updateImportsOnFileMove.enabled": "always",
    "editor.tabSize": 2,
    "files.associations": {
      "*.vue": "vue"
    },
    "eslint.autoFixOnSave": true,
    "editor.cursorBlinking": "smooth",
    "editor.minimap.renderCharacters": false,
    "prettier.singleQuote": true,
    "prettier.semi": false,
    // 让prettier使用eslint的代码格式进行校验
    "prettier.eslintIntegration": true,
    // 让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "element-helper.version": "2.5",
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "files.exclude": {
      // "**/node_modules": true
    }
  }

海外云主机 GPU服务器中对 vscode java中对数组赋值 vscode webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99546.html

项目代码的格式化统一配置 Prettier & ESLint

摘要：以前没时间过，每次项目编辑器的插件就关掉，老项目都没注意过相关的代码规范，这次新项目加入进去实践下三个插件功自动有些规则是冲突的，需要确定优先顺序，其他插件进行自定义化的配置都可以自动保存格式化的功能用和写出高质量代码在中对两者进行配置使用以前没时间过eslint，每次项目vscode 编辑器的eslint插件就关掉eslint，老项目都没注意过相关的代码规范，这次新项目加入进去实践...

Yu_Huang 2019-08-26 12:19 评论0 收藏0
VUE实例图解

摘要：案例品牌列表构建基本结构利用的样式数据要双向更新，所以要用到，同时在后面的中要进行初始化为添加按钮绑定事件的中，绑定值为关键字删除标签绑定函数，传入参数的时候，需要用括号事件修饰符，表示阻止默认事件实例对象新建一个实例函数中初始化需要双向 VUE案例品牌列表构建基本结构利用bootstrap的样式 showImg(https://segmentfault.com/img/bVbf...

wqj97 2019-08-23 11:27 评论0 收藏0
用VS Code开发Vue应用

摘要：这是为什么呢因为我们虽然引入了，但是还没有对做设置，我们在项目的根目录下创建一个文件，然后在其中加入再次执行，现在我们看到已经能够起作用了。摘要： 0错误0警告应该是每个程序员最基本的要求。原文：用vscode开发vue应用作者：张京 Fundebug经授权转载，版权归原作者所有。现在用VSCode开发Vue.js应用几乎已经是前端的标配了，但很多时候我们看到的代码混乱不堪，作为一...

zhaofeihao 2019-05-23 16:28 评论0 收藏0
如何优雅地使用 VSCode 来编辑 vue 文件？

摘要：注本文首发在我的个人博客最近有个项目使用了，本来一直使用的是来进行开发，可是遇到了很多问题。此外，还有很多规范是帮助我们写出更加优雅而不容易出错的代码的。，终于基本搞定了，可以愉快地开发应用了。注：本文首发在我的个人博客最近有个项目使用了 Vue.js ，本来一直使用的是 PHPStorm 来进行开发，可是遇到了很多问题。后来，果断放弃收费的 PHPStorm ，改用 vsco...

pekonchan 2019-08-20 15:14 评论0 收藏0
VsCode 配置Eslint格式化代码（vue）以及常用插件

摘要：配置插件扩展商店搜索，点击安装，并重新加载配置，打开文件首选项设置在用户设置中插入配置代码支持此时，就可以在项目中检测代码了检测比较严格，若希望按照格式化代码，进行以下操作安装插件，这是上一个代码提示，语法高亮等功能的流行插件安装后在默认配配置eslint 插件扩展商店搜索 eslint，点击安装，并重新加载；showImg(https://segmentfault.com/img...

laznrbfe 2019-08-22 17:05 评论0 收藏0