VSCode is a code editor developed by Microsoft, as stated on the official website:

VSCode redefines the code editor

VScode already comes with a lot of rich features, if you want more? You need to install the VSCode extension. Such as adding new languages, themes, debuggers, and connections to other services.

Here’s a look at 15 useful VScode extensions

Appearance of the configuration

VSCode Chinese tool 🎈

Chinese (Simplified) Language Pack for Visual Studio Code is a Simplified Chinese Language Pack plug-in for VS Code.

Chinese VS Code in one second after installation, no longer need to worry about not understanding English 😁.

VSCode theme

One Dark Pro 🎆

Umijs framework leader – VSCode theme recommended by Teacher Yun Qian

The One Dark Pro theme looks smoother and more eye friendly

Set ICONS for files/folders

File/folder icon extension to make your project file type at a glance

Choose one of the following:

  • Material Icon Theme
  • vscode-icons

Material 🎇 Icon Theme

After the installation is enabled, open VSCode’s command panel:

  • The MAC shortcut isshift+command+p

Enter the Material Icon Theme in the command palette and select it to set the Icon for files and folders

Vscode – the ICONS 🧨

After the installation is enabled, open VSCode’s command panel:

  • The MAC shortcut isshift+command+p

Enter vscode- ICONS in the command palette and select them to set the ICONS of the files and folders

Effect of contrast

Code style checking

ESLint ✨

The ESLint configuration in conjunction with the ESLint command can help us find problematic coding patterns or code that does not conform to the rules.

ESLint configuration in conjunction with ESLint’s VSCode extension can automatically help us find problematic coding patterns or code that doesn’t conform to the rules

  • A detailed discussion of ESLint can be found in this article
  • How to configure ESLint can be found in this article – How to build enterprise-level front-end Development specifications 🛠

With ESLint configured, let’s take a look at the effect of enabling/disabling the ESLint extension

Disable the effects of the ESLint extension

When disabling the ESLint extension, when we write code that does not conform to the ESLint specification, an error will only be reported if the project is started or the ESLint command is executed:

To check for code errors, run the ESLint command:

Enable the effect of the ESLint extension

When the ESLint extension is enabled, an automatic warning/error will appear in the code when we write code that does not conform to the ESLint specification:

Prettier 🎉

Prettier is a tool for formatting code. Some rules related to code verification, such as whether to add a semicolon to the end of a statement, can be handled automatically by Prettier.

Prettier’s VSCode extension helps us find problematic coding patterns or code that doesn’t conform to the rules

  • The relevantPrettierA detailed discussion of “can be viewedThis article
  • Prettier can be configured in this article – How to build an enterprise front-end development specification 🛠

Let’s do a little demo to see what Prettier looks like

1. Initialize the project + Install Prettier dependency

$ npm init -y

$ yarn add prettier 
Copy the code

Create a new index.js file and add the following

const a = "a"

function test() {
  return "666"
}

const demo = data= > {
  return data;
}
Copy the code

Create.prettierrc.js and add the following

module.exports = {
    // Over the maximum line break
    "printWidth": 100.// Whether to add a semicolon at the end of the line
    "semi": true.// Use single quotes instead of double quotes
    "singleQuote": true.// TAB key width, default is 2
    "tabWidth": 2.// Add a comma to the last object element
    "trailingComma": "all".// Object, array with Spaces
    "bracketSpacing": true.// JSX > start a new line
    "jsxBracketSameLine": false.// (x) => {} whether to include parentheses
    "arrowParens": "always".// Whether to comment to determine whether to format the code
    "requirePragma": false.// Whether to break a line
    "proseWrap": "preserve"
}
Copy the code

2. Install the Prettier extension

3. Modify VSCodesetting.jsonfile

{
    "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
    "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
    "editor.formatOnSave": true,}Copy the code

The code above helps us implement the following functions

  • willreactandJavaScriptIs formatted asprettierway
  • Automatically formatting code when saving

3. Verify the formatting effect

Finally, we modify any content in index.js and click Save. Prettierrc.js we can see that the code is automatically formatted as required in.prettierrc.js

// Replace double quotes with single quotes
const a = 'a';

function test() {
  return '666';
}
// Parenthesize the arguments to the arrow function
const demo = (data) = > {
  return data;
};
Copy the code

EditorConfig 🎊

EditorConfig helps maintain a consistent coding style for multiple developers working on the same project across multiple editors and ides, a team must-have.

In a multi-person project, everyone’s development habits are different. For indentation, some people like to use the Space key for indentation, some people like to use the TAB key, some people like to set the indentation to 4 Spaces, some people like to set the indentation to 2 Spaces. The result is that everyone’s code is always formatted differently, and submitting to Git will be ugly and inconsistent.

When we use EditorConfig, we can keep things uniform. Such as:

  • Uniform code indentation style isspaceKey ortabkey
  • Whether to remove Spaces at the end of lines
  • Sets the newline type tolf,crandcrlf
  • .

Prettierrc.js note:.editorConfig or override the configuration of.prettierrc.js to avoid confusion. Make sure that the two formats are formatted in the same way

EditorConfig’s VSCode extension helps us find problematic coding patterns or code that doesn’t conform to the rules

  • A detailed discussion of EditorConfig can be found in this article
  • How to configure EditorConfig can be found in this article – How to build enterprise-level front-end development specifications 🛠

Let’s do a little demo to see what EditorConfig looks like

1. Install the editorConfig extension

2. Add. Editorconfig

Add. Editorconfig to the project root directory and add the following

# http://editorconfig.org
root = true

[*]
indent_style = tab
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

Copy the code

In the configuration file above:

  • indent_style: indicates whether the indentation style is TAB or space-space
  • indent_size: Indents size 2
  • end_of_line: Newline lf
  • charset: Character set UTF-8
  • trim_trailing_whitespace: Whether to delete Spaces at the end of lines
  • insert_final_newline: Whether to insert a blank line at the end of the file

3. Verify the formatting effect

  1. Optionally modify the indent_size property in the.editorConfig file.

  2. Modify the project’s JS file and save the code to see if it changes

Stylelint 🎃

Stylelint is a CSS specification verification tool that also supports CSS preprocessors such as LESS. A detailed discussion of Stylelint can be found in this article

Stylelint’s VSCode extension helps us spot problematic encoding patterns or code that doesn’t conform to rules

  • A detailed discussion of Stylelint can be found in this article
  • How to configure Stylelint can be seen in this article – How to build enterprise front-end development specifications 🛠

Let’s do a little demo to see how stylelint works

1. Install the extension

2. Initialize the project

$ npm init -y
Copy the code

3. Install dependencies

yarn add stylelint stylelint-config-standard --dev
Copy the code

4. Add.stylelintrc.jsfile

Add the.stylelintrc.js file to the project root directory and add the following contents

module.exports = {
	extends: 'stylelint-config-standard'.rules: {
		// your rules
	},
	// Ignore other files and verify only those related to the style
	ignoreFiles: [
		'node_modules/**/*'.'public/**/*'.'dist/**/*'.'**/*.js'.'**/*.jsx'.'**/*.tsx'.'**/*.ts',]};Copy the code

5. Addindex.css

Create an index. CSS and add the following content

As you can see, styleInt will indicate in the code if the style code does not conform to the specification

enhancements

Git History 🎄

For developers who are used to using the Git management tool in the editor and don’t like to open another Git UI tool, this plug-in meets your need to query all Git records.

  • View and search for graphics and details in git logs.
  • View a previous copy of the file.
  • View and search history
  • Compare branches/commit records/files
  • .

Gitlens 🎋

Git Lens optimizes the experience of using VSCode with Git to the extreme. It allows you to know when the cursor position code is modified and the author information without leaving the editor or executing any command

Coding efficiency

Tabnine 🎍

Use the auto-complete feature of AI-optimized code, which eliminates the need for other code-prompting tools

Markdown writing

Most blogging platforms now support Markdown editing, which makes it easy to directly copy our content to multiple writing platforms

We can do Markdown editing in VSCode without, of course, installing some “must-have” extensions

Markdown treasure Chest 🎎

Markdown-all-in-one is one of the most useful tools for writing markdowns in VSCode, with shortcuts, creating tables, previewing, and more

  • Automatically generate directories based on titles
  • Turn Markdown HTML
  • From the first sequence number, subsequent sequence numbers are automatically generated
  • .

PDF 🎏 Markdown

For example, we can occasionally use Markdown to write a resume and convert it to a PDF, which is really convenient

Local image files are automatically uploaded to 🎐

Of course, Markdown writing includes texturing, but Markdown only supports image addresses, so how do we convert local image files to remote image addresses?

I recommend PicGo, a tool for quickly uploading images and getting URL links to images

  • PicGo ontology supports multiple graph beds
    • Seven NiuYun
    • Tencent cloud
    • Ali cloud
    • GitHub
    • Gitee
    • .
  • Supports automatic copy of links to clipboard after uploading images

How to use

  1. Install the PicGo VSCode plug-in plug-in
  2. PicGo chart bed related configuration
  3. Copy (Ctrl+C) pictures you want to upload/insert
  4. Enter theMarkdownEditor, mouse over the position to insert the picture
  5. To upload pictures
    1. Windows image upload shortcut key ‘ ‘
    2. Mac shortcut for uploading picturesoption+command+u
  6. If the upload is successful, the image address is automatically generated

Code screenshot tool 🎑

For the code in this article, some people are used to using snippets of markdown’s own code, while others are used to showing screenshots of the code. But manual screenshots to ensure that the size of the unified size, not too beautiful. The plug-in Polacode is recommended. It is a VSCode extension that automatically converts code to images

  • Support the entire file code into images
  • Support mouse selected part of the code into pictures
  • Support for adding shadows or backgrounds to images

It’s very simple to use. After the installation is enabled, open VSCode’s command panel:

  • The MAC shortcut isshift+command+p

Enter polacode in the command panel and select it to start taking screenshots

You can save the code as a uni-sized image and then, with the PicGo extension, automatically insert the image address into the Markdown article.

VSCode’s automatic synchronization

If you have multiple computers and want to synchronize VSCode configuration between them, but don’t need to install additional extensions, use it.

“VSCode” lower left corner ->” Set synchronization “->” Login to the account that needs to be synchronized “->” sync now “can be

The last

This article is shallow, you are welcome to see the officer comments left your opinion!

Feel the harvest of the students welcome to like, pay attention to a wave!

Past oliver

  • 15 front-end hd knowledge map, strongly recommended collection
  • What is the principle of qr code scanning login
  • Let me tell you about some awesome NPM packages
  • The most complete ECMAScript walkthrough
  • Front end developers should know Centos/Docker/Nginx/Node/Jenkins (🍡 long)