Hello everyone, I am the factory after the old dong, north piao four old front. I like photography and cooking. I will share my life in Beijing, front-end learning and workplace topics from time to time.

preface

Whenever the old dong I see the company’s new class of vigorous graduates after entry, with nodepad++ to write front-end code, as if in the age of the universe met a horse riding to work, how a slow word.

The development under the industrial environment pays attention to efficiency and method. There’s nothing difficult about them, except the hands. Hope to help novice quickly master the tool, efficiency instantly improved.

Multigraph warning.

Code editor versus text editor

Sprout a new look at the title, pa of stand up, shout loudly, despise who, who also don’t know a VSCode, sublime, don’t look boring. Here are some examples from some basic scenarios of how you can use these two things to improve your productivity at work.

Scenario reduction

  1. Front-end new girl Xiao Meng points to a static activity page practice, when I went to check that xiao Meng fully played the spirit of bear hardships and stand hard work, in a label a label of the name of the code, ten minutes just finished the following code.
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
Copy the code

  1. Found a handsome boy ran in the closed eyes, hands constantly rolling the wheel, a careful look, he is intercepting and copying a large section of JSON string, good guy, in TXT this plain text editor hold down the right mouse button has been pulling down.

  2. Technology nova Qiqi suddenly thought of a section of JS algorithm, the excitement of the creation of an HTML file, in which good HTML, ready to view the results in the browser F12. After she built the environment, the JS algorithm forgot.

Abstract summary of problem

Xiao Meng, An Ran and Qiqi urgently need a tool to improve their code completion, quick text editing, pure JS running environment and other functions. These are all things that the editor can help with.

A good editor needs to have code completion, code hints, code highlighting, formatting, themes (beauty, directly affect the development mood), plug-in libraries and other functions that can quickly help programmers write code.

New graduates should not feel safe typing code word by word. Efficiency first, so that you can leave work early to find a good match 🤦♂️.

Quick start -vscode

General operation of VSCode

! + TAB key: HTML file quickly generate basic structure.

Any label + TAB key: Quickly generate label structure.

Ul >li + TAB: substructure, other substructures are also built with >.

XXX *8: Quickly generate multiple labels.

Press and hold the mouse to create drop-down: vertical row selection, you can modify the column as a whole.

Keyboard end key: the whole cursor end.

Shift + Arrow key: Select a small area.

Shift + right mouse click: large area selected.

CTRL + F: Single file search.

CTRL + H: Text replacement.

Full-text search for a string

Two: formatting and saving automatic formatting

This was useful before git commits automatically triggered code formatting.

To save automatic formatting, simply search formatSave in preferences (CTRL + Shift + P, call out the console and type Settings into preferences, or right click the pinion below and click Settings) and check the box.

If you don’t think the default formatting looks pretty, use Prettier to format code.

When you install it, select a piece of code, right-click on Format, it tells you to switch to the default formatting plug-in (HTML, CSS, JS files are used for the first time, Prettier), select Prettier.

Three: quickly start VSCode and load files

Sometimes we need to quickly open certain files in VSCode. A quick way to do this is to use CMD code.

Four: road strength automatic completion

Sometimes when we import or write other paths, we often see novice friends looking for paths and then.. /.. / what, there is a path autocomplete plug-in.

Once installed, write.. / will automatically bring out the path.

Five: automatic guide package

When developing in typeScript (e.g. React), it is common to import components from a package after writing them. This is done by adding import XXX from XXX to the header of the package. You don’t have to find your own path anymore.

Six: local server

Working on a non-engineered local development server (such as Webpack Server) and simply writing a demo to try out some features, you can install Live Server and start a local server directly to see the effect.

Once installed, a Go Live icon will appear in the lower left corner and you can tap it to start the local service.

VSCode also has many useful plugins such as eslint, SFTP, etc.

Quick start -Sublime Text3

In theory vscode can do all this, but sometimes for a quick view of a file, Sublime Text3 is just as good.

One interesting feature is the ability to run code for an environment directly using Sublime, and of course our front-end is JS code. This feature can be used to quickly launch a JS environment, such as Kiki, by performing a JS algorithm or verifying an idea.

Once the code is written, CTRL +B is ready to run.

The configuration code is as follows

{
    "cmd": ["node"."--use-strict"."--harmony"."$file"]."selector": "source.js"
}
Copy the code

See the GIF for the configuration method

Quick start – Online editor CodesandBox

This I mainly used to record some test code snippets and learn some content, it is an online learning and testing environment.

Imagine a scenario where you need to test a function of a framework, such as Vue or React, but don’t want to cli a project in order to test something lost, you can use this website to write.

The site also has the benefit of storing your inspiration and code so that you can quickly find it later when organizing yourself, theoretically more stable than the Sublime environment in the previous section.

(Vanillia is the native environment, so don’t be fooled.)

After clicking on an environment, you can happily verify your idea, as shown in the picture below, with various prompts and formatting.

Afterword.

Recently, when I was in the front of the interview, I occasionally asked about my proficiency in using the editor. I think there will be no big problem in the basic development if I can play the editor well, but my practical ability may be very strong. Since I am in the delivery department, practical ability is still very important.

Photo taken on Sept. 9, 2019 shows Jingshan Mountain, Southwest China’s Guizhou Province.

The first article is here, mainly to code editor, write not to move, the follow-up has some convenient tools to sort out and introduce, also give xiao Bai q&a what at present. Welcome to your attention.