Update code editors and dealing with files #37484

chrisdavidmills · 2025-01-03T17:16:34Z

Description

When we restructured the MDN Learn web development section, some articles were published incomplete, with TODO sections.

This PR fills in content for Code editors, Dealing with files, and to a certain degree, Command line crash course.

The second and third ones weren't marked as incomplete, but the former really needed some updates, and the latter needed a few tweaks for consistency.

Motivation

Additional details

Related issues and pull requests

github-actions · 2025-01-03T17:18:36Z

Preview URLs

Flaws (753)

URL: /en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors
Title: Code editors
Flaw count: 251

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- and 246 more flaws omitted

URL: /en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line
Title: Command line crash course
Flaw count: 251

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- and 246 more flaws omitted

URL: /en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files
Title: Dealing with files
Flaw count: 251

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- and 246 more flaws omitted

External URLs (18)

URL: /en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors
Title: Code editors

https://code.visualstudio.com/ (2 times) (Note! This may be a new URL 👀)
https://code.visualstudio.com/docs (1 time) (Note! This may be a new URL 👀)
https://code.visualstudio.com/docs/editor/codebasics (1 time) (Note! This may be a new URL 👀)
https://code.visualstudio.com/docs/getstarted/keybindings (1 time) (Note! This may be a new URL 👀)
https://en.wikipedia.org/wiki/GNOME_Text_Editor (1 time) (Note! This may be a new URL 👀)
https://en.wikipedia.org/wiki/Indentation_style (1 time) (Note! This may be a new URL 👀)
https://en.wikipedia.org/wiki/Microsoft_Notepad (1 time) (Note! This may be a new URL 👀)
https://en.wikipedia.org/wiki/TextEdit (1 time) (Note! This may be a new URL 👀)
https://netbeans.apache.org/front/main/index.html (1 time) (Note! This may be a new URL 👀)
https://notepad-plus-plus.org/ (1 time) (Note! This may be a new URL 👀)
https://prettier.io/ (1 time) (Note! This may be a new URL 👀)
https://www.jetbrains.com/webstorm/ (1 time) (Note! This may be a new URL 👀)
https://www.sublimetext.com/ (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line
Title: Command line crash course

https://prettier.io/ (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files
Title: Dealing with files

https://code.visualstudio.com/docs/getstarted/keybindings (1 time) (Note! This may be a new URL 👀)
https://developers.google.com/search/docs/crawling-indexing/url-structure (1 time) (Note! This may be a new URL 👀)
https://raw.githubusercontent.com/mdn/beginner-html-site/refs/heads/main/images/firefox-icon.png (1 time) (Note! This may be a new URL 👀)
https://www.google.com/imghp (1 time) (Note! This may be a new URL 👀)

bsmth · 2025-01-06T11:20:35Z

files/en-us/learn_web_development/getting_started/environment_setup/code_editors/index.md

@@ -36,29 +33,161 @@ Previously, we told you to install a code editor, as you'll need one to work thr

 ## What code editors are available?

-Binary file editors like Microsoft Word are unsuitable for editing code. You need something that cleanly handles and outputs plain text.
+Before starting to code, you've probably already had some experience of working on text documents, probably in a program like Microsoft Word. You are probably also wondering whether you can work with code documents in these same programs? Unfortunately, the answer is "no":


Suggested change

Before starting to code, you've probably already had some experience of working on text documents, probably in a program like Microsoft Word. You are probably also wondering whether you can work with code documents in these same programs? Unfortunately, the answer is "no":

Before starting to code, you may have had some experience working on text documents in a program like Microsoft Word. You might also be wondering whether you can work with code in these same programs. Unfortunately, the answer is "not really":

bsmth · 2025-01-06T11:22:17Z

files/en-us/learn_web_development/getting_started/environment_setup/code_editors/index.md

-Integrated Development Environments (IDEs) such as Visual Studio (Windows, not free), NetBeans (multiplatform, free), and WebStorm (multiplatform, not free) tend to have more features than simple code editors but tend to be more complex than what you need at this stage in your learning journey.
+You are better off with a fully-fledged code editor like [Visual Studio Code](https://code.visualstudio.com/) (multiplatform, free), [Sublime Text](https://www.sublimetext.com/) (multiplatform, not free), or [Notepad++](https://notepad-plus-plus.org/) (Windows, free).
+
+We would recommend Visual Studio Code (VS Code), as it is the editor we mostly use. If you do not already have VS Code (or another code editor) installed, [install it now](https://code.visualstudio.com/).


minor suggestion

Suggested change

We would recommend Visual Studio Code (VS Code), as it is the editor we mostly use. If you do not already have VS Code (or another code editor) installed, [install it now](https://code.visualstudio.com/).

We would recommend Visual Studio Code (VS Code), as it is the editor we mostly use. If you do not already have VS Code (or another code editor) installed, you should [install it before proceeding](https://code.visualstudio.com/).

bsmth · 2025-01-06T11:22:55Z

files/en-us/learn_web_development/getting_started/environment_setup/code_editors/index.md

+In this section, we'll look at some of the most significant functionality that you will find in code editors, describing how they can help you with your coding work.
+
+> [!NOTE]
+> The sections below barely scratch the surface of what a code editor can do. For a more complete feature list, see the [Visual Studio Code documentation](https://code.visualstudio.com/docs) (or search the web for your chosen code editor's docs if you are using something different).


Suggested change

> The sections below barely scratch the surface of what a code editor can do. For a more complete feature list, see the [Visual Studio Code documentation](https://code.visualstudio.com/docs) (or search the web for your chosen code editor's docs if you are using something different).

> The sections below only scratch the surface of what a code editor can do. For a more complete feature list, see the [Visual Studio Code documentation](https://code.visualstudio.com/docs) (or search the web for your chosen code editor's documentation if you are using something different).

bsmth · 2025-01-06T11:23:38Z

files/en-us/learn_web_development/getting_started/environment_setup/code_editors/index.md

+
+### Opening and editing files
+
+This may seem like an obvious point, but installing a code editor is useful because it will give you a single app that will open all code files you may want to use through your development work. There is nothing more annoying than double-clicking a file on your computer and having it open in a weird random app, or having your operating system tell you it doesn't recognize that file.


:)

Suggested change

This may seem like an obvious point, but installing a code editor is useful because it will give you a single app that will open all code files you may want to use through your development work. There is nothing more annoying than double-clicking a file on your computer and having it open in a weird random app, or having your operating system tell you it doesn't recognize that file.

This may seem like an obvious point, but installing a code editor is useful because it will give you a single app that will open all code files you may want to use through your development work. There is nothing more annoying than double-clicking a file on your computer and having it open in a random, unrelated app, or having your operating system tell you it doesn't recognize that file.

bsmth · 2025-01-06T11:27:38Z

files/en-us/learn_web_development/getting_started/environment_setup/command_line/index.md

@@ -87,7 +87,7 @@ The terminal is available on macOS at `Applications/Utilities/Terminal`.

 As with some other programming tools, using the terminal (or command line) on Windows has traditionally not been as simple or easy as on other operating systems. But things are getting better.

-Windows has traditionally had its own terminal-like program called `cmd` ("the command prompt") for a long time, but this definitely doesn't have parity with Unix commands, and is equivalent to the old-style Windows DOS prompt.
+Windows has traditionally had its own terminal-like program called `cmd` ("the command prompt") for a long time, but this doesn't have parity with Unix commands, and is equivalent to the old-style Windows DOS prompt.


Leaving a TODO comment here checking if we mention https://learn.microsoft.com/en-us/windows/wsl/install

bsmth · 2025-01-06T11:31:14Z

files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md

+
+### Opening a project folder and creating files in VS Code
+
+While you can create text files inside the OS file system UI, it is generally easier and less error-prone to create them inside your code editor. In fact, VS Code has its own file explorer that allows you to create all the folders and files you need for your web projects.


Should we mention anything here about being careful not to edit things on your system in dangerous places? Like make sure you're editing or doing search/replace in the correct directory and not overwriting anything important (work in ~/code/projects place or something?)

You already mention something down below, just worth considering if you think it might avoid some trouble.

bsmth · 2025-01-06T11:32:12Z

files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md


 ## What structure should a website have?

-Next, let's look at what structures websites generally have. The most common things we'll have on any website project we create are an index HTML file and folders to contain images, style files, and script files:
+When you are working on websites locally on your computer, you should keep all the related files for each site in a single folder. In turn, you should keep all your website folders in one central folder, so they are all easy to find.


Suggested change

When you are working on websites locally on your computer, you should keep all the related files for each site in a single folder. In turn, you should keep all your website folders in one central folder, so they are all easy to find.

When you are working on websites locally (on your computer), you should keep all the related files for each site in a single folder. In turn, you should keep all your website folders in one central folder, so they are all easy to find.

bsmth · 2025-01-06T11:36:33Z

files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md

+1. Many computer systems, including most web servers, are case-sensitive. So for example, if you put an image on your website at `test-site/images/MyImage.jpg` and then in a different file you try to reference the image with `test-site/images/myimage.jpg`, it may not work.
+2. When you invoke commands on the command line, you have to put quotes around file names with spaces in them, otherwise they will be interpreted as two separate items.
+3. Some programming languages (for example, Python) do not work well with spaces in file names in certain circumstances (for example, if these files are modules to be imported).
+4. File names commonly map to web addresses/URLs. If you, for example, have a file called `my file.html` in your server's root folder, generally it will be accessible at a URL like `https://example.com/my%20file.html`. Web servers usually replace the spaces in filenames with `%20` (the character code for spaces in URLs), which can create subtle bugs with some systems if they assume that file names and URLs match perfectly.


I think it's probably okay to introduce this term for the brave:

Suggested change

4. File names commonly map to web addresses/URLs. If you, for example, have a file called `my file.html` in your server's root folder, generally it will be accessible at a URL like `https://example.com/my%20file.html`. Web servers usually replace the spaces in filenames with `%20` (the character code for spaces in URLs), which can create subtle bugs with some systems if they assume that file names and URLs match perfectly.

4. File names commonly map to web addresses/URLs. If you, for example, have a file called `my file.html` in your server's root folder, generally it will be accessible at a URL like `https://example.com/my%20file.html`. Web servers usually replace the spaces in filenames with `%20` (because URLs are {{Glossary("Percent-encoding", "percent-encoded")}}), which can create subtle bugs with some systems if they assume that file names and URLs match perfectly.

bsmth

Thanks, Chris! Leaving a +1, some comments for you, nothing major!

Update code editors and dealing with files

f308e18

chrisdavidmills requested a review from a team as a code owner January 3, 2025 17:16

chrisdavidmills requested review from hamishwillee and removed request for a team January 3, 2025 17:16

github-actions bot added the size/m [PR only] 51-500 LoC changed label Jan 3, 2025

chrisdavidmills requested a review from bsmth January 3, 2025 17:18

bsmth reviewed Jan 6, 2025

View reviewed changes

bsmth approved these changes Jan 6, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update code editors and dealing with files #37484

Update code editors and dealing with files #37484

chrisdavidmills commented Jan 3, 2025

github-actions bot commented Jan 3, 2025

bsmth Jan 6, 2025

bsmth Jan 6, 2025

bsmth Jan 6, 2025

bsmth Jan 6, 2025

bsmth Jan 6, 2025

bsmth Jan 6, 2025

bsmth Jan 6, 2025

bsmth Jan 6, 2025

bsmth Jan 6, 2025

bsmth left a comment

	Before starting to code, you've probably already had some experience of working on text documents, probably in a program like Microsoft Word. You are probably also wondering whether you can work with code documents in these same programs? Unfortunately, the answer is "no":
	Before starting to code, you may have had some experience working on text documents in a program like Microsoft Word. You might also be wondering whether you can work with code in these same programs. Unfortunately, the answer is "not really":

	We would recommend Visual Studio Code (VS Code), as it is the editor we mostly use. If you do not already have VS Code (or another code editor) installed, [install it now](https://code.visualstudio.com/).
	We would recommend Visual Studio Code (VS Code), as it is the editor we mostly use. If you do not already have VS Code (or another code editor) installed, you should [install it before proceeding](https://code.visualstudio.com/).

	> The sections below barely scratch the surface of what a code editor can do. For a more complete feature list, see the [Visual Studio Code documentation](https://code.visualstudio.com/docs) (or search the web for your chosen code editor's docs if you are using something different).
	> The sections below only scratch the surface of what a code editor can do. For a more complete feature list, see the [Visual Studio Code documentation](https://code.visualstudio.com/docs) (or search the web for your chosen code editor's documentation if you are using something different).


		### Opening and editing files

		This may seem like an obvious point, but installing a code editor is useful because it will give you a single app that will open all code files you may want to use through your development work. There is nothing more annoying than double-clicking a file on your computer and having it open in a weird random app, or having your operating system tell you it doesn't recognize that file.


		### Opening a project folder and creating files in VS Code

		While you can create text files inside the OS file system UI, it is generally easier and less error-prone to create them inside your code editor. In fact, VS Code has its own file explorer that allows you to create all the folders and files you need for your web projects.

	When you are working on websites locally on your computer, you should keep all the related files for each site in a single folder. In turn, you should keep all your website folders in one central folder, so they are all easy to find.
	When you are working on websites locally (on your computer), you should keep all the related files for each site in a single folder. In turn, you should keep all your website folders in one central folder, so they are all easy to find.

Update code editors and dealing with files #37484

Are you sure you want to change the base?

Update code editors and dealing with files #37484

Conversation

chrisdavidmills commented Jan 3, 2025

Description

Motivation

Additional details

Related issues and pull requests

github-actions bot commented Jan 3, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bsmth left a comment

Choose a reason for hiding this comment