-
Notifications
You must be signed in to change notification settings - Fork 1
/
file.DevEnvironment.html
233 lines (169 loc) · 10 KB
/
file.DevEnvironment.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
File: Development Environment
— Documentation by YARD 0.9.28
</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/common.css" type="text/css" />
<script type="text/javascript">
pathId = "DevEnvironment";
relpath = '';
</script>
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/app.js"></script>
</head>
<body>
<div class="nav_wrap">
<iframe id="nav" src="file_list.html?1"></iframe>
<div id="resizer"></div>
</div>
<div id="main" tabindex="-1">
<div id="header">
<div id="menu">
<a href="_index.html">Index</a> »
<span class="title">File: Development Environment</span>
</div>
<div id="search">
<a class="full_list_link" id="class_list_link"
href="class_list.html">
<svg width="24" height="24">
<rect x="0" y="4" width="24" height="4" rx="1" ry="1"></rect>
<rect x="0" y="12" width="24" height="4" rx="1" ry="1"></rect>
<rect x="0" y="20" width="24" height="4" rx="1" ry="1"></rect>
</svg>
</a>
</div>
<div class="clear"></div>
</div>
<div id="content"><div id='filecontents'><h1 id="development-environment">Development Environment</h1>
<h2 id="introduction">Introduction</h2>
<p>Rouge is written in Ruby and has a number of development dependencies. To
develop new features for Rouge (like a lexer for a new syntax) or to fix bugs,
you need to set up a development environment.</p>
<p>Please note that this guide is about how to configure a development environment
on your local machine. If you want to isolate your Rouge development environment
using Docker, take a gander at our <a href="Docker.md">guide</a>.</p>
<h3 id="ruby-and-git">Ruby and Git</h3>
<p>First things first. This guide is <em>not</em> a guide to installing Ruby and Git.
There are a number of excellent resources out there explaining how to do these
things. For Ruby, we recommend <a href="https://www.ruby-lang.org/en/documentation/installation/">the official documentation</a> and
for Git, <a href="https://help.github.com/en/articles/set-up-git">GitHub's documentation</a>.</p>
<h3 id="terminal-emulators">Terminal Emulators</h3>
<p>This guide assumes you are familiar with the <em>command line</em>. The command line is
accessed through a <em>terminal emulator</em>.</p>
<ul>
<li><p>In <strong>macOS</strong>, the default emulator is called "Terminal" and can be found by
searching for "Terminal" in Spotlight.</p></li>
<li><p>In <strong>Windows</strong>, you can open a command line by running "Command Prompt". You
can start this by typing <code>cmd.exe</code> at the Start Menu.</p></li>
<li><p>In <strong>Linux</strong>, well, you're probably reading this at the command line.</p></li>
</ul>
<h3 id="github">GitHub</h3>
<p>The official Rouge repository is on GitHub and we use GitHub to coordinate
development. While you don't <em>need</em> a GitHub account to hack on Rouge, you're
going to need one to contribute your improvements back to the Rouge community.
Creating <a href="https://github.com/join">an account</a> is free of charge. And just think how awesome
it'll be when you take your collaboration to the "next level".</p>
<h2 id="getting-rouge">Getting Rouge</h2>
<h3 id="forking-the-repository">Forking the Repository</h3>
<p>To develop Rouge, we're going to create a "fork" of Rouge where we can make our
changes. These will be happily isolated from everyone else and then—through the
magic of Git—mergeable back into the main project later.</p>
<p>First, visit <a href="https://github.com/rouge-ruby/rouge">the front page</a> of Rouge's repo on GitHub. Unless you're
crazy and are trying to develop code on your phone (like perhaps I am doing
right now), you'll see a button near the top right of your browser window that
will say "Fork". Click this and GitHub will ask where you want to create your
fork. Select your account and—boom!—you've just forked Rouge.</p>
<h3 id="cloning-your-fork">Cloning Your Fork</h3>
<p>The next thing to do is to get your fork onto your computer. Git makes this
easy. In the directory you want to hold your repository, type:</p>
<pre class="code shell"><code class="shell">git clone git@github.com:<your_github_account_name>/rouge.git
</code></pre>
<p>Git will reach out to GitHub, grab the code and put it in a directory called
<code>rouge/</code>.</p>
<h3 id="adding-upstream">Adding Upstream</h3>
<p>By default, the clone of the repository you've made will contain a reference to
GitHub. That's great for syncing back to your fork but what if you want to sync
your fork back up with the official repository. If you spend a sufficient amount
of time developing Rouge, this is something you'll want to do.</p>
<p>Fortunately, it's easy to add additional remote repositories. To add the
official Rouge repository (with the name <code>upstream</code>), type the following:</p>
<pre class="code shell"><code class="shell">git remote add upstream https://github.com/rouge-ruby/rouge.git
</code></pre>
<p>Now you'll be able to fetch changes from the official repository and merge them
back into your code. For more information, check out <a href="https://help.github.com/en/articles/configuring-a-remote-for-a-fork">the documentation</a>
on GitHub.</p>
<h2 id="installing-development-dependencies">Installing Development Dependencies</h2>
<p>Ruby provides support for using external "packages" of Ruby code. These packages
are called <em>gems</em>. While Rouge does not depend on any gems to perform syntax
highlighting, it does have a number of dependencies that you need to install to
<em>develop</em> Rouge. These are the development dependencies.</p>
<h3 id="installing-bundler">Installing Bundler</h3>
<p>The easiest way to install Rouge's development dependencies is using
<a href="https://bundler.io/">Bundler</a>. Bundler is itself a gem but we'll install it differently to how we
install the other dependencies.</p>
<p>If you already develop with Ruby, you no doubt have Bundler installed. You can
check if you do by typing <code>bundle -v</code> at the command line. If you don't see the
version number then you need to install Bundler. To do this, type:</p>
<pre class="code shell"><code class="shell">gem install bundler
</code></pre>
<p>Ruby's <code>gem</code> tool will grab the latest Bundler package and install it. Once
that's complete, you're ready to rock.</p>
<h3 id="installing-the-dependencies">Installing the Dependencies</h3>
<p>Rouge comes with a list of gems it depends upon called a <em>Gemfile</em>. Make sure
you're at the top level of your clone of your repository and type:</p>
<pre class="code shell"><code class="shell">bundle config set path 'vendor'
bundle install
</code></pre>
<p>This first command tells Bundler to register the directory <code>vendor/</code> as
the project-specific install location for dependencies, and the second command
installs all dependencies. This has one drawback (explained below) but means the
gems we use for Rouge are isolated from the other gems we may have installed on
our system. This will be tremendously helpful in avoiding conflicts that arise
because of the use of incompatible versions of a gem.</p>
<p>The one drawback is that we will need to tell Ruby every time we run our Rouge
code that it needs to look for the gems in <code>vendor/</code>. Bundler makes this easy by
providing the command <code>bundle exec</code>. So if we want to run our Rake tests, we
type <code>bundle exec rake</code> rather than just <code>rake</code>.</p>
<h2 id="using-branches">Using Branches</h2>
<p>It's best to develop in a <em>branch</em>. You can create a branch by typing:</p>
<pre class="code shell"><code class="shell">git checkout -b <name_of_your_branch>
</code></pre>
<p>You don't need to do it this way but Rouge maintainers often use the format
<code>feature.<name></code> for features and <code>bugfix.<name></code> for bug fixes.</p>
<p>Using branches will make it easier for others to collaborate with you and make
it easier for you to start fresh if you screw things up from your last stable
state. You can read more about branches on <a href="https://help.github.com/en/articles/about-branches">GitHub</a>.</p>
<h2 id="next-steps">Next Steps</h2>
<p>You're now ready to roll. Here are the things you can do from the top level of
your cloned repository:</p>
<ol>
<li><p><strong>Run the Visual Test App</strong>: Rouge includes a little web app you can run to
display highlighted code. You can run this by typing <code>bundle exec rackup</code>. By
default, this will start a web server on port 9292. You can access it by
going to <a href="http://localhost:9292">http://localhost:9292</a> with Rack running. If everything is working,
you'll see little snippets of code for each lexer in the repository. You can
look at the full visual sample for a lexer by clicking on the name of the
lexer.</p></li>
<li><p><strong>Run the Tests</strong>: Rouge comes with a test suite you can run to check for
errors in your code. You can run this using Rake. Just type <code>bundle exec rake</code>
and you'll (hopefully) be greeted by a series of dots that indicate a
successful test.</p></li>
<li><p><strong>Check Code Quality</strong>: Rouge uses the popular library <a href="https://github.com/rubocop/rubocop">RuboCop</a> for
checking code quality. You can run RuboCop by—you guessed it—typing
<code>bundle exec rubocop</code>.</p></li>
</ol>
<p>You're all set up! Have fun hacking on Rouge!</p>
</div></div>
<div id="footer">
Generated on Fri Jun 14 14:26:36 2024 by
<a href="https://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
0.9.28 (ruby-3.3.0).
</div>
</div>
</body>
</html>