VS Code配置初探
之前一直在用 Webstorm,看现在 VS Code 热度那么高,想着尝试一下。
熟悉编辑器的快捷键
安装使用到的插件
- Chinese(修改你的编辑器语言,默认英文)
- ESLint(代码规范和错误检查工具)
- Prettier(代码格式化工具)
- EditorConfig for VS Code(定义项目的编码规范,编辑器的行为会与.editorconfig 文件中定义的一致,并且其优先级比编辑器自身的设置要高,这在多人合作开发项目时十分有用而且必要)
- Vetur(识别 vue 文件)
- Syncing(同步你的 VS Code 配置,在另一台机器使用可以自动同步配置,不需要重新慢慢配了)
- Manta's Stylus Supremacy(使得 stylus 格式化更好看)
当然大家可以自由选择,不需要和我一样
配置设置
- 打开文件->首选项->设置
- 右上角有个
{}
标识,点击打开settings.json
文件 - 把下面这一段拷贝进去,保存文件,ok
{
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式
}
},
// 格式化stylus, 需安装Manta's Stylus Supremacy插件
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
"editor.fontSize": 13, // 设置字号
"files.autoSave": "onFocusChange" // 在失去焦点时自动保存文件
}
把配置上传到 github
前提是要安装Syncing
插件,具体的配置步骤在这。
今后在另一台机器使用可以自动同步配置,不需要重新慢慢配了。
VS Code配置初探的更多相关文章
- React-Native(二):React Native开发工具vs code配置
从网上翻阅了一些开发react-native的开发工具时,发现其实可选的工具还是比较多的Sublime Text,WebStrom,Atom+Nuclide,vs code 等.因为我用.net生态环 ...
- Mycat 中间件配置初探与入门操作
Mycat中间件配置初探与入门操作 By:授客 QQ:1033553122 实践环境 Mycat-server-1.5.1-RELEASE-20161130213509-win.tar.gz 下载地址 ...
- VS code 配置为 Python R LaTeX IDE
VS code配置为Python R LaTeX IDE VS code的中文断行.编辑功能强大,配置简单. VSC的扩展在应用商店搜索安装,快捷键ctrl+shift+x调出应用商店. 安装扩展后, ...
- VS code配置go语言开发环境之自定义快捷键及其对应操作
VS code 配置 自定义快捷键 及其对应操作 由于 vs code 的官方 go 插件不支持像 goland 一样运行当前 go 文件, 只能项目 或者 package 级别地运行, 因此有必 ...
- 利用 Settings Sync 同步vs code配置
vs code上有各种各样不同的插件,如果要在不同的电脑上使用 vs code 配置是件比较麻烦的事情,使用 Settings Sync 将 vs code 配置备份起来,当需要在其他电脑使用 vs ...
- Windows 10 Mac 为Vs Code配置C/C++环境
2019-06-10 更新: 加上Mac版本的Vscode配置文件 0.前言 实现效果:右键一键编译运行C/C++文件 Vs code的代码效果很好看,也很轻量,所以想为Vs Code配置C/C++环 ...
- Visual Studio Code配置 HTML 开发环境
Visual Studio Code配置 HTML 开发环境 https://v.qq.com/x/page/l0532svf47c.html?spm=a2h0k.11417342.searchres ...
- Visual Studio Code配置GoLang开发环境
Visual Studio Code配置GoLang开发环境 在Visual Studio Code配置GoLang开发环境 作者:chszs,未经博主允许不得转载.经许可的转载需注明作者和博客主页: ...
- Visual Studio Code配置
Visual Studio Code 从1.23.0开始VS Code就不再默认提供各语言版本, 而是改为使用插件的方式提供语言包. 在插件商店搜索Chinese (Simplified), 安装. ...
随机推荐
- SDWC补题计划
2018的寒假去了SD的冬令营,因为一班二班难度悬殊,对我很不友好,几乎什么也没学会,但是我把两个班的课件都存了下来,现在慢慢把两个班的例题以及课后题都补一补(毕竟冬令营的钱不能白花). 这些题目横跨 ...
- 1875: [SDOI2009]HH去散步
Time Limit: 20 Sec Memory Limit: 64 MB Submit: 2333 Solved: 1204 [Submit][Status][Discuss] Descripti ...
- Ansible--01
一.ansible是什么: 类似puppet之类的运维自动化工具 二.为什么选择ansible: 1. ansible是python语言开发的,python语言进入门槛低,方便基于pytnon对ans ...
- Spring Boot中使用EhCache实现缓存支持
SpringBoot提供数据缓存功能的支持,提供了一系列的自动化配置,使我们可以非常方便的使用缓存.,相信非常多人已经用过cache了.因为数据库的IO瓶颈.一般情况下我们都会引入非常多的缓存策略, ...
- centos下mysqlreport安装和使用
首先查看你的机器是否安装了perl: #perl -v 显示版本号即表示已安装 然后: #yum install perl-DBD-mysql perl-DBI #yum install mysqlr ...
- Mac生成APP图标和启动图的脚本
概述 之前用的一个批量导出APP图标和启动图的软件,今天发现收费了,于是自己造了个简单的轮子. 实现 Mac上的sips命令,可以很方便的帮助用户修改图片尺寸 Xcode里面的APP启动图资源包含两部 ...
- java 内存优化
计数器pc 2.2 虚拟机栈和程序计数器一样,虚拟机栈也是线程私有的,它的生命周期与线程相同.虚拟机栈描述的是java方法执行的内存模型. 每个方法(不包含native方法)执行的同时都会创建一个栈帧 ...
- centos下Zabbix Agent端部署和安装
首先重复一下前面的规划 server端: 192.168.136.144 centos6.5 (虚拟机) agent端: 192.168.136.155 centos6.5( 虚拟 ...
- SSL证书更换(具体路径可参考iRedMail.tips文件)及邮件服务器架构
由于Google的chrome不认可赛门铁克的证书,因此要更换新证书 0.8.6版本 0.9.4版本 - /etc/pk ...
- 为Python加入默认模块搜索路径
为Python加入默认模块搜索路径 方法一:函数加入 1) import sys 2) 查看sys.path 3) 加入sys.path.append("c:\\") 方法二:改动 ...