[本文出自天外归云的博客园]

文件-首选项-设置-打开settings.json-用户设置区域填写:

{
"workbench.colorTheme": "Monokai",
"workbench.editor.enablePreview": false, // 打开文件不覆盖
"search.followSymlinks": false, // 关闭rg.exe进程
"editor.minimap.enabled": false, // 关闭快速预览
"files.autoSave": "afterDelay", // 打开自动保存
"editor.lineNumbers": "on", // 开启行数提示
"editor.quickSuggestions": {
// 开启自动显示建议
"other": true,
"comments": true,
"strings": true
},
"editor.tabSize": 2, // 为了符合eslint的两个空格间隔原则
"files.associations": {
"*.vue": "vue"
},
"eslint.autoFixOnSave": true,
"eslint.options": {
"extensions": [".js", ".vue"]
},
"prettier.eslintIntegration": true, // 让prettier使用eslint的代码格式进行校验
"prettier.semi": true, // 去掉代码结尾的分号
"prettier.singleQuote": true, // 使用单引号替代双引号
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 让函数(名)和后面的括号之间加个空格
"vetur.format.defaultFormatter.html": "js-beautify-html", // 格式化.vue中html
"vetur.format.defaultFormatter.js": "vscode-typescript", // 让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned" // 属性强制折行对齐
}
},
"eslint.validate": [
"javascript",
{
"language": "vue",
"autoFix": true
},
{
"language": "html",
"autoFix": true
}
],
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/dist": true
},
"emmet.syntaxProfiles": {
"javascript": "jsx",
"vue": "html",
"vue-html": "html"
},
"editor.fontSize": 22, // 编辑器文字大小
"window.zoomLevel": 0
}

之后在VSCode中就可以通过 ctrl+shift+f 来按eslint格式进行格式化了。

用VSCode写Vue要用到的配置的更多相关文章

  1. vscode写vue模板--代码片段

    Ctrl+Shift+P打开命令输入 snippet (打开用户代码片段) 在输入vue(选择代码片段的语言) 如果搜索不到,安装一个插件 vueHelper 如果搜索到复制粘贴以下代码 { &quo ...

  2. 团队协作统一vue代码风格,vscode做vue项目时的一些配置

    1. 安装Vetur 扩展 主要是用于让vscode能识别vue文件,对vue代码进行高丽处理,并且它内置了一些代码格式化的设置 2. 安装ESLint 如果你的项目已经开启了eslint规范, 再有 ...

  3. 使用vscode开发vue cli 3项目,配置eslint以及prettier

    初始化项目时选择eslint-config-standard作为代码检测规范,vscode安装ESLint和Prettier - Code formatter两个插件,并进行如下配置 { " ...

  4. VSCode 初次写vue项目并一键生成.vue模版

    VSCode 写vue项目一键生成.vue模版 1.新建代码片段 文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定 2.配置快捷生成的vue模板 ...

  5. 用vscode开发vue应用[转]

    https://segmentfault.com/a/1190000019055976 现在用VSCode开发Vue.js应用几乎已经是前端的标配了,但很多时候我们看到的代码混乱不堪,作为一个前端工程 ...

  6. 用vscode开发vue应用

    阅读 3237 收藏 205 2019-05-02 原文链接:segmentfault.com 云服务器 1 核 2G , 9元/月 ,买十送二,99/年!!!快来上车!developer.huawe ...

  7. VSCode编写vue项目文件出现红色波浪线

    VSCode编写vue项目文件出现红色波浪线 在我们在写Vue或其他项目时,可能会遇到这样一个问题:明明自己的代码程序都没有错,代码规范也符合标准,为什么它就是给我报错显红呢??? 解决方案 第一种方 ...

  8. jupyter巨好玩-使用jupyter结合VScode写博客

    打开jupyter-ipython 其实人家就叫jupyter了,后面咱可能就少提ipython了. # 打开命令行,让我们输入 jupyter notebook 当然,这个前提是你已经安装了jupy ...

  9. 解决vscode格式化vue文件出现的问题

    遇到的问题 使用vscode开发vue项目的时候,格式化vue文件,与自己配置的eslint标准会有冲突. 引号问题:单引号变双引号 分号问题:行末是否加分号.自动加/减分号 当然还会有其他个性化冲突 ...

随机推荐

  1. BZOJ.1568.[JSOI2008]Blue Mary开公司(李超线段树)

    题目链接 线段树每个节点记录\(f(mid)\)最大的直线(在\(mid\)处函数值最大的直线),称作优势线段(还是直线啊...无所谓了). 如果是在区间插入线段会影响\(O(\log n)\)个区间 ...

  2. JavaScript基础笔记(十一)JSON

    JSON 关于JSON,最重要的一点是理解它是一种数据格式,不是编程语言. 一.语法 JSON 不支持变量.函数或对象实例,它就是一种表示结构化数据的格式,虽然与 JavaScript 中表示数据的某 ...

  3. servlet模板的修改

    找到myeclipse的安装目录: 找到此目录下的这个jar包 右键以压缩包的方式打开然后找到templates文件夹并打开它: 在打开的templates文件夹找到并以高级记事本打开Servlet. ...

  4. 学习Struts--Chap05:值栈和OGNL

    1.值栈的介绍 1.1 值栈的介绍: 值栈是对应每一个请求对象的数据存储中心,struts2会给每一个请求对象创建一个值栈,我们大多数情况下不需要考虑值栈在哪里,里面有什么,只需要去获取自己需要的数据 ...

  5. 几个常用的JS鼠标键盘事件例子

    首先普及一下鼠标左右键值的相关方法: 1.event.x 鼠标横轴  2.event.y 鼠标纵轴  3.event.keycode 键盘值  4.events.button==0 默认.没有按任何按 ...

  6. jQusery .基础

    1.jQusery 的基本用法 <%@ page language="java" contentType="text/html; charset=UTF-8&quo ...

  7. 2、html补充

    今天补充几个html标签 <body>内常用标签 1.<div>和<span> <div></div> : <div>只是一个块 ...

  8. git 一些常见问题 总结

    问题1: Auto packing the repository in background for optimum performance. See "git help gc" ...

  9. (2):Mysql 查看、创建、更改 数据库和表

    一.一探究竟 我想看看有多少个数据库,有多少个表,以及表里有啥东西.那么你可以这样: 图形界面: 命令: 查看多少个数据库:注意 后面带s #查看 SHOW DATABASES; #查看表 USE b ...

  10. 分享12款令人瞠目结舌的WebVR演示和实验效果

    不管你信不信, WebVR绝对是浏览器下一个让你激动的技术方向, 也许很快你就可以使用VR头显或者相关设备直接访问web内容和资源啦! 在这篇资源分享帖中,我们将介绍很多基于浏览器的VR演示和游戏,帮 ...