当前位置: 首页 > news >正文

放弃webstrom转战vscode

本来是webstrom的忠实用户,无奈webstrom要么需要在网上找一个破解版或者不断的去找激活码,且破解版和激活码的文章总是很多,但是要找到真正有效的却总是要花费不少功夫。终于忍无可忍,转战vscode。(注:文中快捷键是windows快捷键,Mac电脑快捷键将Ctrl换成command即可!)

一、软件下载

软件下载vscode是免费的,直接去官网下载即可。

二、vscode基本设置

vscode支持选择配置,也支持编辑setting.json文件修改默认配置。setting.json配置的好处是方便快捷,一个团队如果都用相同的setting.json,代码设置基本可以保持一致,方便管理和开发。

1、vscode选择配置

Code -> Preferences ->Settings

2、vscode编辑setting.json文件修改默认配置

但,如何打开配置代码?如上图的操作,Code ->Preferences ->Settings,打开设置洁面在设置界面搜索workbench.settings.editor,选中json即可改成json设置;然后重新打开设置。

以下是我的个人配置,仅供参考:

{"files.associations": {"*.vue": "vue","*.wpy": "vue","*.wxml": "html","*.wxss": "css"},"terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe","git.enableSmartCommit": true,"git.autofetch": true,"emmet.triggerExpansionOnTab": true,"emmet.showAbbreviationSuggestions": true,"emmet.showExpandedAbbreviation": "always","emmet.includeLanguages": {"vue-html": "html","vue": "html","wpy": "html"},//主题颜色 //"workbench.colorTheme": "Monokai","git.confirmSync": false,"explorer.confirmDelete": false,"editor.fontSize": 14,"window.zoomLevel": 1,"editor.wordWrap": "on","editor.detectIndentation": false,// 重新设定tabsize"editor.tabSize": 2,//失去焦点后自动保存"files.autoSave": "onFocusChange",// 自动格式化代码"editor.formatOnType": true,// #值设置为true时,每次保存的时候自动格式化;"editor.formatOnSave": true,//每120行就显示一条线"editor.rulers": [],// 在使用搜索功能时,将这些文件夹/文件排除在外"search.exclude": {"**/node_modules": true,"**/bower_components": true,"**/target": true,"**/logs": true,}, // #让vue中的js按"prettier"格式进行格式化"vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatter.js": "prettier","vetur.format.defaultFormatterOptions": {"js-beautify-html": {// #vue组件中html代码格式化样式"wrap_attributes": "force-aligned", //也可以设置为“auto”,效果会不一样"wrap_line_length": 200,"end_with_newline": false,"semi": false,"singleQuote": true},"prettier": {"semi": false,"singleQuote": true}},"update.mode": "none","editor.suggest.snippetsPreventQuickSuggestions": true,"editor.language.brackets": [],"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"workbench.settings.editor": "json"}
3、禁用自动更新

Code ->Preferences ->Settings,打开设置洁面在设置界面搜索update mode并将设置更改为none。

4、开启代码提示设置

Code ->Preferences ->Settings,打开设置洁面在设置界面搜索prevent并取消勾选

三、必备插件

在输入框中输入想要安装的插件名称,点击安装即可。

1、vscode-icons

可以改变编辑器里面的文件图标

2、Chinese(Simplified)

此中文(简体)语言包为 VS Code 提供本地化界面。

3、Auto Rename Tag

自动修改匹配的HTML标签

4、Path Intellisense

智能路径提示,可以在你输入文件路径时智能提示。

5、stylelint

CSS / SCSS / Less 语法检查

6、Import Cost

引入包大小计算

7、Prettier

代码格式化插件,可以配置prettier.config.js文件,配合eslint、git hooks 一起使用,提升项目代码的规范性

8、vetur

Vue语法高亮、智能感知、Emmet等

9、VueHelper

Vue,Vue-router和Vuex的代码片段

10、Vue Language Features (Volar)

v1.8.13 开发vue2的时候使用vetur 帮我们提供良好的代码智能提示

11、GitLens

详细的 Git 提交日志,哪一行代码,何时、何人提交都有记录。

四、vscode基本快捷键

以下快捷键中windows为Ctrl,mac的快捷键将Ctrl换成Command,alt换成option
向下复制一行:shift + alt + ↓
向上复制一行;shift + alt + ↑
搜索:ctrl + f
替换:ctrl + alt + f
在项目内搜索:ctrl + shift + f
快速打开最近打开的文件:Ctrl+P

参考文章: https://zhuanlan.zhihu.com/p/113222681

https://zhuanlan.zhihu.com/p/133414551

http://www.lryc.cn/news/175589.html

相关文章:

  • VSCode 和 CLion
  • Learn Prompt- Midjourney Prompt:Prompt 提示语
  • uvm白皮书练习_ch2_ch223_加入objection机制
  • 利用C++开发一个迷你的英文单词录入和测试小程序-增强功能
  • kibana启动报错
  • 排查内存泄露
  • 【LeetCode-简单题】501. 二叉搜索树中的众数
  • MAC word 如何并列排列两张图片
  • PTA第三章作业题
  • vscode vue html 快捷键
  • mysql锁相关的总结
  • 计算机竞赛 深度学习乳腺癌分类
  • docker-compose搭建的mysql,如何定时备份数据
  • webpack:关于处理html文件的插件html-webpack-plugin、add-asset-html-webpack-plugin
  • 如何两个不同的脚本文件之间传递参数
  • 一篇文章彻底搞懂熵、信息熵、KL散度、交叉熵、Softmax和交叉熵损失函数
  • [架构之路-223]:数据管理能力成熟度评估模型DCMM简介
  • 十大排序算法的实现(C/C++)
  • HTML+CSS综合案例一新闻详情
  • 【Spring Boot】实战:实现Session共享
  • 3、Elasticsearch功能使用
  • 数据链路层协议
  • java版网页代码生成器系统myeclipse定制开发mysql数据库网页模式java编程jdbc生成无框架java web网页
  • ElementUI实现登录注册啊,axios全局配置,CORS跨域
  • 面经分享 | 某康安全开发工程师
  • leetcode - 389. Find the Difference
  • asp.net企业生产管理系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio
  • vue中或者react中的excel导入和导出
  • 如何在Ubuntu的根目录下创建删除目录
  • lv5 嵌入式开发-6 线程的取消和互斥