From the course: CSS Essential Training

Setting up your text editor

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Setting up your text editor

“

- [Instructor] For this course, I'll be using Visual Studio Code for the project exercises. If you already have a text editor that you prefer, use whatever works for you. Just note that the interface and features may be a little different. For those using VSCode, to make sure we're on the same page, I'd like to go over some settings that I'll be using. Here's what will be covered, general editor setup, working with folders and files, customizing the settings, such as mini-map, tab size, word wrap, and changing themes, installing extensions to add additional themes, and a Live Server feature. If you haven't already installed the editor, take a moment to do that now. When first opening VSCode, you'll see a get started page with some setup suggestions. If you click the X in the tab to close the page, it will still reappear every time you open VSCode. I prefer to start with a blank editor, so to keep it from reopening on startup, click welcome or go back. Uncheck the show welcome page on startup and then close the page. If you change your mind, you can always add it back in through the settings. Before we get into the setup, let's add the exercise files to the editor. I have my copy saved to the desktop. To add it to the editor, I can just drag and drop it from the desktop into the VSCode workspace. If you see a security popup, select the checkbox and the yes, I trust the authors button. You can also use the menu option, file open or file open folder. From here, just navigate to the folder and select open. My files have already been added, so I'm just gonna cancel this. I'm also gonna close this panel over here, since we won't be using it. Then, to give us something to work with as we adjust the settings, let's open the example file in the chapter one 01_03 folder. Double click on it to open the file. The settings can be accessed from the gear icon on the bottom left of the editor. If there's an available keyboard shortcut option, it will be listed to the side of the menu item. The settings will open as a page in the workspace and defaults to the commonly used customization options, but you can see all the categories in the sidebar. If you don't wanna switch back and forth between pages, click the icon that looks like two columns near the top right of the editor. The last page you had open will now be displayed on the right side to create a two column view. Close the settings file on the left. Now we can see both files at the same time. We can also collapse the sidebar to increase the display area by clicking the file icon. Click it again to open it. One of the default settings I like to change is to disable the mini-map on the right side of the editor. It can help with navigating long pages of code, but I personally don't find it useful. I'd rather have more space to display the code. This can be disabled in the settings or by opening the context menu. Depending on your mouse settings, it's a right click or a control click to open the menu. If you're using a trackpad, you may need to use a two-finger tap. Uncheck mini-map to remove this feature. Now, let's take a look at tab size. Instead of browsing through the settings, we can use the search bar. Under editor tab size, this setting refers to the number of spaces one tab key press is equal to. In the indented code blocks, we can see vertical lines that line up with the tab spacing. If I highlight it, we'll see two dots in each tab space, which means there are two spaces per tab. The default is four spaces, but I prefer a more compact look for my code indentation, so I'll change it to two. Two or four spaces are the most commonly used options. Now, let's do a search for another setting, word wrap. The default setting is off. This means that if the content goes beyond the width of the editor, you'll need to scroll horizontally to see it. There are a few word wrap options, and you can hover over each one to see more details. I'm gonna keep it basic and just choose on. Now, the content will wrap automatically within the width of the editor. When you make any revisions to the page, a dot will appear on the tab. This just lets you know that you have unsaved changes in the file. To save the file, go to file save, or use the keyboard shortcut, command plus S on a Mac or control plus S on a PC. You may also wanna choose a different theme for the editor. This will change the colors of the editor's UI and the syntax highlighting for the code. We can do a search for color theme or click the gear icon and go to themes, color theme. Currently, I'm using the default dark modern theme. To switch to something else, pick an option from the dropdown menu. You can also install more themes and add features by using extensions. Click the icon that looks like four blocks in the sidebar and do a search for themes. Click on any of the options to see more details. I'm gonna use a theme pack called Ayu, A-Y-U. Once you find one that you like, click install to add it to your theme options. It will automatically be added to your theme options. I'll go with the Mirage bordered theme. Let's add one more extension. Search for Live Server. I'll select the version by Ritwick Dey. For now, let's just install it. I'll explain more about how to use it after we set up the project files. When you clear the search bar, you'll see all of your installed extensions, which you can review or uninstall. These are just a few features to get you started. To see what else is available, check out the editor's documentation or take a look through the rest of the settings.

Contents