VSCode + WSL 2 + Ruby环境搭建图文详解

vscode配置ruby开发环境

vscode近年来发展迅速,几乎在3年之间就抢占了原来vim、sublime text的很多份额,犹记得在2015-2016年的时候,ruby推荐的开发环境基本上都是vim和sublime text,然而,随着vscode的发展,vscode下ruby的开发体验已经非常不错。现在基本上使用win 10 wsl2 + vscode + windows terminal的体验已经不逊于mac + vim (sublime) + item 2的体验了

总体步骤

使用win10专业版配置ruby开发环境大致分为以下几步:

  • 开启win10 wsl功能
  • 升级wsl2
  • 安装ubuntu
  • 安装ruby(rvm)
  • 安装vscode
  • 安装vscode wsl扩展
  • 安装vscode ruby相关扩展

经过以上7步就可以开始愉悦的ruby开发了,再开始之前,可以先看个效果图。

1. 开启win10 wsl功能

ruby对Linux和Mac比较友好,在windows下很多第三方库要配合mingw或msys2才能安装,不过好在windows 10提供了Linux子系统,在win10 2004版本中wsl也升级到了wsl2,速度更快,功能更完善。

要使用wsl2需要先在控制面板中开启wsl功能:

  • 适用于Linux的Windows子系统
  • 虚拟机平台

2. 升级wsl2

目前wsl2还需要安装一个内核升级包,具体可参考微软说明:

wsl2安装说明

wsl2 update包

更新包安装完成后,输入命令

wsl --set-default-version 2

3. 安装Ubuntu

在微软应用商店安装Ubuntu,当前Ubuntu版本为20.04 LTS

安装完成以后,配置Ubuntu默认为wsl2

# 查看
wsl --list --verbose

# 设置
wsl --set-version Ubuntu 2

4. 安装ruby

在Linux下安装ruby有多种方法,比较主流的方法是RVM,不过为了简单起见,我直接通过ubuntu的apt工具进行了安装。

关于RVM的安装可参考如下网站:

RVM官网

RVM实用指南

通过APT安装,输入下列命令即可

sudo apt install ruby ruby-dev ri ruby-bundle

安装完成以后需要配置gem国内镜像,参考如下网址:

gem中文镜像

输入下列命令

# 设置gem source
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/

# 查看gem source
gem sources -l

# 设置bundle
bundle config mirror.https://rubygems.org https://gems.ruby-china.com

5. 安装vscode

vscode直接在官网下载安装即可,这里我选择了System Installer

vscode官网下载页面

6. 安装vscode wsl扩展

vscode安装完成以后,可以在plugin中找到Remote - WSL扩展,点击安装即可

7. 安装vscode ruby相关扩展

直接在plugin中搜索ruby在wsl中安装下列五个扩展即可

  • Peng Lv/Ruby
  • Castwide/Ruby Solargraph(Language Server)
  • misogi/ruby-rubocop(Lint)
  • Simple Ruby ERB
  • endwise

其中,ruby solargraphrubocop除了安装扩展,还需要通过gem安装第三方包

sudo gem install rubocop
sudo gem install solargraph

重新加载vscode-wsl就可以愉快的使用ruby language进行开发了

vscode使用

在使用上基本只要require了相应的库,就solargraph就会对require的库中涉及的类和模块进行提示,非常方便。唯一有问题的地方就是require的时候没有提示,这可能就需要自己记一下库的名称,不过相比于原来已经好太多了,应该说在可以接受的范围内。

1. 如果安装了新的第三方库会提示吗?

如果安装了sinatra这样的库,vscode-ruby如何给出提示呢?只需要Ctrl + Shift + P,选择solargraph: build new gem documention即可

2. rubocop如何使用?

rubocop是一个Ruby Lint工具,可以进行Ruby代码风格检查,并能够自动修复,只需要Ctrl + Shift + P,选择Ruby: autocorrect by rubocop即可

3. 常用类型注释

ruby是动态强类型语言,由于不需要指定函数返回值类型,这导致IDE无法自动推断一些变量的类型。目前Python、PHP、TypeScript都在不断的强化类型以方便IDE进行静态检查。IDE只有在知道类型的情况下才能准确地进行智能提示。

在ruby 2当中,我们可以通过类型注释的方式增强IDE推断能力。常见的类型注释可参考YARD项目

下面代码给出了一些示例。

require 'socket'

server = TCPServer.new 2000
loop do
 # 代码块参数类型注释
 # @param {TCPSocket} client
 Thread.start(server.accept) do |client|
 client.puts 'hello !'
 client.puts "Time is #{Time.now}"
 client.close
 end
end

server = TCPServer.new 2000
loop do
 # 变量注释
 # @type {TCPSocket} client
 client = server.accept
end

# 函数参数和返回值注释,数组类型
# @param {Array(Integer)} nums
# @param {Integer} target
# @return {Array(Integer)}
def two_sum(nums, target)
 hash_nums = {}
 result = []
 nums.each_with_index do |num, index|
 hash_nums[num] = index
 end

 nums.each_with_index do |num, index|
 another = target - num
 if hash_nums[another] && hash_nums[another] != index
 result.push(index, hash_nums[another])
 break
 end
 end

 result
end

到此这篇关于VSCode + WSL 2 + Ruby环境搭建图文详解的文章就介绍到这了,更多相关VSCode WSL 2 Ruby环境搭建内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • VsCode搭建Java开发环境的方法

    1:在 Visual Studio Code 中打开扩展视图(Ctrl+Shift+X),输入关键词java.spring分别下载Java开发插件包和springboot插件包 2:配置参数 点击设置按钮,进入设置选项,配置用户设置(文件->首选项->设置 Ctrl+,) { "editor.minimap.enabled": false, "window.zoomLevel": 0, "workbench.iconTheme": &

  • 使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤

    写在前面的话 作为有个 Python 菜逼,之前一直用的 Pycharm,但是在主题这一块怎么调整都感觉要么太骚,看起来不舒服,要么就是简直不能看.似乎用大 JB 公司 IDE 的人似乎都不怎么重视主题这个东西. 我个人是那种"喜新厌旧"的,所以看久了 Pycharm 就感觉很难受了,再加上 Pycharm 太笨重了,就换成了以前短时间用过的 VSCode,以前没用是懒得折腾插件,现在闲下来准备折腾一下! 这里放一张我现在的 Pycharm 的配色主题: 闲话少说,进入正题! 创建 D

  • Win7环境下搭建Go开发环境(基于VSCode编辑器)

    一.在搭建的时候参考以下文章 http://www.cnblogs.com/zsy/archive/2016/02/28/5223957.html http://blog.csdn.net/hil2000/article/details/51714607 http://www.cnblogs.com/mubing/p/5820038.html http://www.golangtc.com/t/57d3961db09ecc1635000170 二.准备(将所有需要的软件下载下来) 1.VSCod

  • win10下VSCode+CMake+Clang+GCC环境搭建教程图解

    打算用C/C++把基本的数据结构与算法实现一遍, 为考研做准备, 因为只是想实现算法和数据结构, 就不太想用VisualStudio, 感觉VSCode不错, 遂在网上找了一些教程, 结合自己的需求, 配置一下开发环境. 安装软件 CMake CMake是一个跨平台的自动化建构系统,它使用一个名为 CMakeLists.txt 的文件来描述构建过程; 官网下载安装, 傻瓜式操作; 记得把安装目录下的bin文件添加到系统环境变量, 这个可以在安装的时候勾选, 勾选了就不用自己添加了; 检测是否安装

  • VSCode + WSL 2 + Ruby环境搭建图文详解

    vscode配置ruby开发环境 vscode近年来发展迅速,几乎在3年之间就抢占了原来vim.sublime text的很多份额,犹记得在2015-2016年的时候,ruby推荐的开发环境基本上都是vim和sublime text,然而,随着vscode的发展,vscode下ruby的开发体验已经非常不错.现在基本上使用win 10 wsl2 + vscode + windows terminal的体验已经不逊于mac + vim (sublime) + item 2的体验了 总体步骤 使用w

  • node.js环境搭建图文详解

    身为一名Java开发者对前端充满无限的好奇,于是开始踏入前端的领地.要想先学习,搭建环境是必备,所以整理一篇node.js环境搭建教程. Node.js 是一个让 JavaScript 运行在服务端的开发平台 官网https://nodejs.org 下载 下载地址https://nodejs.org/en/download/ 本次下载LTS长期支持版,.zip解压版本(当然也可以使用安装版.msi),点击右侧[64-bit]即可下载. 解压 解压到自己所要存放的文件夹中,如图: 解压完成后会有

  • .NET 开发环境搭建图文详解

    1 概述 在接下来的时间里,将会入手ASP.NET MVC这一专题,尽量用最快的时间,最有效的方法,分别从深度和广度上剖析这一专题,力求讲明白.讲透.以此来与大家分享,力求达到共同学习,共同交流,共同进步的目的. 我想,任何一个项目,无论是java,php,还是c++,开发前的必要环节,即开发环境的搭建 是不可或缺的.当然,你可以借助于阿里云,腾讯云,联通等已为你配置好的第三方服务器平台.不幸的是,这些所谓的第三方服务器平台,配置可能没有想象中的那么完美,或者根本达不到你的要求,这时,你至少会想

  • Anaconda+vscode+pytorch环境搭建过程详解

    1.安装Anaconda Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项.在官网上下载https://www.anaconda.com/distribution/,因为服务器在国外会很慢,建议从清华镜像https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/下载. 2.安装VScode 需要在Anaconda再装VScode,因为Anaconda公司和微软公司的合作,不用在对进

  • Centos7 ftp环境搭建教程详解

    没玩过linux,折腾了半天的ftp,好不容易亲测通过了.不容易啊.下面把劳动成果分享到我们平台,感兴趣的朋友参考下吧! 操作环境:vm虚拟机 centos7 首先:搞定网络问题:默认情况下使用ifconfig可以看到虚拟机下是无网络的.(注:虚拟机网络设置为NAT或桥接模式都是可以的) 输入命令nmtui 打开网络配置 回车->回车 将倒数第二项 Automatically connect 勾上 然后就有网络了 然后更新系统:yum update 查看vsftpd是否已安装:vsftpd -v

  • Android Studio开发环境搭建教程详解

    对于移动端这块,笔者之前一直都是进行iOS开发的,也从来没用过Java.但是因为进入了Google Android全国大学生移动互联网创新挑战赛(进入官网)的总决赛(笔者"西部计算机教育提升计划"的项目被直接推荐进入决赛),这个比赛要求一定要提交apk程序,所以我不得不赶紧学习一下Android开发了. 下面就对自己学习的过程做一个记录. 一.安装Android Studio 笔者用的计算机配置如下: Mac下安装Android Studio应该更简单一些,只需要下载一个Android

  • React全家桶环境搭建过程详解

    本文介绍了React全家桶环境搭建过程详解,分享给大家,具体如下: 环境搭建 1.从零开始搭建webpack+react开发环境 2.引入Typescript 安装依赖 npm i -S @types/react @types/react-dom npm i -D typescript awesome-typescript-loader source-map-loader 新建tsconfig.json { "compilerOptions": { "outDir"

  • Windows下Goland的环境搭建过程详解

    1.安装包下载 进入Go官方下载界面 下载并安装,安装时注意最好不要将其安装在C盘,我这里将它安装在D盘: 2.环境变量配置 安装包会自动添加环境变量,但是默认的Go工作空间C盘,而我们一般不在C盘放自己的文件,这里以我的工作空间为例我的Go项目文件放在D盘的GoFiles文件夹中,所以这里演示重新配置: 主要是配置两个环境变量:GOROOT和GOPATH: GOROOT指GO的安装目录 GOPATH是作为编译后二进制的存放目的地和import包时的搜索路径,不要设置为GO的安装目录,我们一般用

  • 在clion上配置libtorch开发环境的图文详解

    先上结果: CPP: CMakeLists.txt: 到这里差不多的选手应该都不需要往下看了 描述问题: 按照pytorch官网给的教程,在ubuntu下配置libtorch环境,如上图,需要创建一个build文件夹,然后cmake时不是简单地cmake .. 而是有一个参数-DCMAKE_...... 之后才是.., 而在ubuntu下使用CLion进行编程时,CLion对每一个工程都会默认生成一个cmake-build-debug文件夹,完全不需要创建build文件夹 因此本文说明如何在cl

  • SpringCloud2020版本配置与环境搭建教程详解

    1.maven父子工程搭建 项目使用maven工程搭建,下面是工程的结构图.SpringCloud2020是父工程,仅负责依赖的管理,eureka是注册中心的服务端,testclient是测试的客户端. 1.1 父工程pom <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&qu

随机推荐