Master how to transform a simple text list into a JavaScript Array with ease using Visual Studio Code. This step-by-step guide is ideal for individuals who want to improve their coding skills or those planning a career in full stack development.
Key Insights
- The tutorial demonstrates how to convert a plain text list into a JavaScript Array.
- This technique is useful for full stack developers and those proficient in JavaScript.
- Visual Studio Code is the tool used for this conversion process.
- The process involves adding cursors to line ends and selecting entire lines in Visual Studio Code.
- The tutorial provides clear, step-by-step instructions, including how to wrap the list in quotes and brackets.
- Mastering this technique can significantly enhance efficiency when coding in JavaScript.
This exercise is excerpted from Noble Desktop’s front-end web development (Emmet coding tips) training materials and is compatible with updates through 2022. To continue learning web development with hands-on training, check out our coding bootcamps in NYC and live online.
HTML & CSS Foundations
-
Semantic HTML
<header>, <nav>, <main>, <article> — describe content meaning.
-
CSS Selectors
Element, class, ID, descendant, pseudo-class — pick what to style.
-
Box Model
Content + padding + border + margin — every element follows this.
-
Responsive Design
Media queries and flexible units for every screen.
Wrapping Text on Multiple Lines (Convert a List into JavaScript Array)
We can quickly turn a plain text list like this:
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
SundayInto a JavaScript Array like this:
days=['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']Here’s How to Do It
These instructions are for Visual Studio Code:
- Select the multi-line plain text list (such as the days list above).
- Choose Selection > Add Cursors to Line Ends.
- To select the entire line, hold Shift and hit the Home key. If you don’t a Home key, hold Shift then fn (the function key) and hit Left Arrow.
- Type a single-quote (
') to wrap them in quotes. - Press Right Arrow twice to move cursor after the quote.
- Type a comma.
- Press Right Arrow to go to next line.
- Hit Delete (Mac) or Backspace (Windows) to pull everything onto one line.
- Delete the extra comma at the end of the line (if there is one).
- Select all the list code that’s now on a single line.
- Type a left square bracket [ to wrap it in brackets.
-
In the front of the bracketed code type days= and you should end up with:
days=['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
