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

文件-首选项-设置-打开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. 几个比较很重要的Shader相关教程

    1. 论坛上有个兄弟写个的ToonShaderModel,可以参考ShaderModelhttps://github.com/EpicGames/UnrealEngine/pull/1552/file ...

  2. BZOJ.3293.[CQOI2011]分金币(思路)

    3293 双倍经验 1045 先考虑能否断环为链.显然是可以的,因为金币不可能在整个环上平移.所以我们枚举断点\(k\),表示\(k\)和\(k+1\)之间不交换金币. 令\(d_i=a_i-aver ...

  3. Self-introduction 自我介绍

    Hello everybody,我是一名计算机科学与技术大二的新生,来自小平爷爷的故乡——广安.我之所以说自己是新生,一方面因为我大一下学期才从广播电视学转到计科,另一方面是因为我又进入了新一学年的学 ...

  4. redis -- python操作连接redis简单示例

    1.先安装 redis,pyredis sudo pip install redis sudo pip install python-redis 2.示例: importredis >>& ...

  5. Linux——目录结构思维导图

  6. vue父页面给子页面传递数据

    父页面: <template> <div>{{msg}} <Son title='向子文件传递数据' :data='data' :lifemsg ='lifemsg' : ...

  7. navicat for mysql 只把指定的表数据结构导出

    第一步 右键点击数据库名字,点击数据传输,在常规视图下选择自己要导出的表, 选择要导出的表,点击文件,然后切换到高级视图下,把插入记录前面的对号取消勾选,点击开始即可只导出表结构

  8. bzoj 1005

    prufer序列 性质: 1.一棵n个结点的树可表示为长度 n-2 的prufer序列 2.每个结点出现在prufer序列中的次数==该结点的度 -1 公式推出来了,大数模板没有除法..等开学了Jav ...

  9. python之迭代器篇

    一.迭代器 只要对象本身有_iter_()_方法,那它就是可迭代的 执行__iter__就会生成迭代器 迭代器有__next__用于获取值 __next__超出界限了会报StopIteration异常 ...

  10. flask之flask-script组件

    Flask Script扩展提供向Flask插入外部脚本的功能,包括运行一个开发用的服务器,一个定制的Python shell,设置数据库的脚本,cronjobs,及其他运行在web应用之外的命令行任 ...