preface

vscode configuration settings JSON is an old topic. As time goes by, we may change it very frequently, but we should try our best to avoid one problem:

⚠️ With a certain item, but I don't know its function ⚠️

In fact, it is a question of knowing why.

Based on this topic, this paper will analyze my settings in detail JSON, hoping to bring some help to readers.

text

The following plug-ins are configured from:

Efficient vscode plug-in sharing in front-end web development (dialectical massive practical test)

The plug-ins mentioned in.

Auto save

{
  // Auto save
  "files.autoSave": "afterDelay",
}

Using vscode, it is strongly recommended to enable automatic saving here, because lightning coding cannot allow manual saving, and it should have a successful code style at the same time.

typeface

{
  // Font size
  "editor.fontSize": 13,
  // Font Chinese Japanese にほんご
  "editor.fontFamily": "'JetBrains Mono NL','Isoline'",
}

For font size, it is generally recommended to use 13 yards on the screen, which is not particularly large, and the amount of information displayed is sufficient.

In terms of font recommendation, it is recommended to use the non conjoined font of the official JetBrains Mono series of JB family bucket in English, that is, JetBrains Mono NL. You can jetbrains mono Download and install the font completely, and you can use it immediately. For the isolated development scenario against the sky, please refer to the following to configure the font:

vscode does not install fonts and uses local / network font files to change fonts (without administrator rights)

In Chinese, it is recommended to use equal lines. This font can provide a very smooth body feeling for Chinese / Japanese characters without edges and corners.

settings sync

{
  // sync git synchronization
  "sync.gist": "......",
  "sync.autoUpload": false,
  "sync.autoDownload": false,
}

Early vscode settings are recommended Settings Sync The plug-in is synchronized to github gist. Although ms has the financial resources to support vscode synchronization after acquiring github in the later stage, it is not very easy to use. Secondly, try not to do single point disaster recovery.

In order to ensure sufficient security, I still use Settings Sync for manual sync disaster recovery (as shown above, automatic upload and download are turned off, and all manually use cmd + shift + p to select Sync: update / upload configuration command for manual synchronization).

If you want to use it, after installing the plug-in, agree to authorize github gist access according to the prompt.

Code prompt

{
  // code snippet
  "editor.suggestSelection": "recentlyUsedByPrefix",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
}

Without going into details here, our strategy is:

1. recentlyUsedByPrefix: match according to the prefix used first to facilitate the selection of our preferred items.

2. Automatically override default value: automatically override the default value of the prompt, which is also to maintain habitual priority.

New window

{
  // New window
  "workbench.startupEditor": "newUntitledFile",
  "workbench.editor.enablePreview": false,
}

The default policy of vscode is that the new window will overwrite the current window by default and open the file in the default preview state, which will make it inconvenient to switch and modify between multiple files, and the double-click opening is not in line with customary habits.

Therefore, we continue to keep the newly opened file through newUntitledFile. It must be an independent new window, combined with enablePreview: false to cancel the preview mode, so as to ensure the stability of the editing mode.

Icon series

{
  // Open material icons
  "workbench.iconTheme": "material-icon-theme",
}

The file / folder icons I like to use are Material Icon Theme , this plug-in has a large number of built-in icons, and covers the configuration file icon of many tools (such as commitlint / lerna, etc.), which is particularly comfortable to use.

File hierarchy

{
  // Folder compact display
  "explorer.compactFolders": false,
}

By default, vscode and github are consistent, that is, when there is only one folder under a folder, the folder in the middle will be skipped and will be displayed in one line (which is particularly useful in object-oriented file hierarchies such as java). However, for FE scenarios, it is not necessary to omit, and the abbreviation will affect the layout of the project architecture, Therefore, it is recommended to close the folder abbreviation here.

End of file

{
  // Default lf end
  "files.eol": "\n",
}

This is an old classic question. First of all, let's clarify two points:

1. The file endings on linux / mac / win are different

2. Git may cause inconsistency on different platforms for different terminators

Usually, we will use workspace format editorconfig collocation EditorConfig for VS Code The plug-in solves this problem and uniformly specifies it as the linux terminator lf:

# .editorconfig
root = true

[*]
end_of_line = lf

But there is no configuration for There is nothing we can do in the workspace of editorconfig, so we need to fundamentally solve this problem. The best way is to lock the lf end from vscode.

Git scm

{
  // git
  "git.enableSmartCommit": true,
}

Turn on smart commit, which is very helpful for using scm gui panel. It can help us use cmd + enter to automatically add and commit all change s when we don't add to the temporary storage area.

Note: if you are not a user of vscode visual Git gui, you do not need to configure this item, but it is recommended to use vscode native gui for simple operations, which is particularly convenient in check change and can flexibly deal with most basic scenarios (push / merge, etc.)

vscode update

{
  // vscode update tips
  "update.mode": "none",
}

Turn off the automatic update prompt of vscode. We can upgrade it manually on a regular basis. Pay attention to a comprehensive understanding of changelog so that we can enjoy the new features immediately.

Delete confirmation

{
  // delete confirm
  "explorer.confirmDelete": false,
}

Flexible development does not need to delete the secondary confirmation, because we want the smooth and seamless operation. At the same time, you can also use cmd + z to undo the deletion behavior.

Terminal behavior

{
  // Internal terminal
  "code-runner.runInTerminal": true,
  "code-runner.fileDirectoryAsCwd": true,
}

The code runner plug-in enables the terminal to be located in the currently selected folder every time it is opened. This requires some configuration. See the following for details:

vscode shortcut key to quickly open the terminal to the file location opened in the current directory

vscode extension

{
  // vscode Suggested expansion
  "extensions.ignoreRecommendations": false,
  // extension update
  "extensions.autoUpdate": "onlyEnabledExtensions",
}

For vscode plug-in behavior, we make several configurations:

1. Turn off the behavior of vscode recommended plug-ins. As a mature developer, we should understand what we are doing and know what we need and don't need, so we don't need "primary" tips.

2. Only the enabled plug-ins can start the automatic update function to prevent the disabled plug-ins from wasting resources while updating in the background.

Translation plug-in

{
  // Google Translate plugin configuration
  "googleTranslateExt.replaceText": true,
  "commentTranslate.targetLanguage": "zh-CN",
  // translation
  "varTranslation.translationEngine": "google",
}

For the selection of translation plug-ins, it is recommended to use three at the same time. See the following for details:

Best matching of vscode translation plug-ins, translation variables, delimitation translation, Chinese-English translation (improving production efficiency)

At the same time, we configure as follows:

1. googleTranslateExt.replaceText: turn on translation replacement to make Google Translate The plug-in can overwrite our Chinese constituency with English. (of course, I prefer the translation of deep)

2. commentTranslate.targetLanguage: specify Comment Translate The translation language object of the plug-in is Chinese, which is convenient for us to view the Chinese translation of notes.

3. varTranslation.translationEngine: specify Hump translation assistant According to your network situation, it is recommended to choose the best translation source on your network (of course, the translation quality is also very different).

files formatting

{
  // The default format is prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // prettier global config
  "prettier.semi": false,
  "prettier.printWidth": 80,
  "prettier.singleQuote": true,
}

In the early days, when a hundred flowers bloom, we also need Beautify / Beautify css and other plug-ins to configure different formatters according to different files. However, at present, prettier has developed very mature. The file formats supported by prettier use prettier for best practice formatting, so we can configure the Default Formatting behavior and use prettier, This can help us save a lot of formatting configuration for different files.

It should be noted that not all prettier default configurations are best practices. It is recommended to configure the global default behavior, so that you can enjoy the best formatting behavior in any file.

eslint

{
  // eslint config
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  // eslint automatic recognition workspace
  "eslint.workingDirectories": [{ "mode": "auto" }],
}

For eslint configuration, you need to install eslint plug-ins( ESLint )Then save cmd + s and open the automatic repair (source.fixAll.eslint), which is convenient for us to manually format the code at any time.

At the same time, in the monorepo scenario, the eslint plug-in often looks for the eslintrc configuration file at the top level and ignores the eslint configuration of the folder of a single project. Therefore, we need to open the auto automatic recognition mode to better deal with the monorepo scenario.

Vue

{
  // Prevent vetur from reporting errors
  "vetur.validation.template": false,
  // "vetur.validation.script": false,
}

In the development of vue 2 system, vetur is used for support. In order to prevent template parsing from reporting errors, we need to turn off the corresponding verification behavior, which is also a common saying.

Depending on the situation, you may also need to turn off the verification behavior of the script area.

svg

{
  // svg preview config
  "svg.preview.mode": "svg",
}

When previewing svg, you can directly view the source code instead of the preview image, which is convenient for us to modify the color and other behaviors.

When previewing, it is recommended that you use a plug-in to support svg preview.

live-server

{
  // liveserver close open service prompt
  "liveServer.settings.donotShowInfoMsg": true,
}

When it is often necessary to start a server locally, it is often used Live Server Plug in. After starting the server, the plug-in will give a prompt to start the port, which needs to be manually turned off every time. For developers who often use the plug-in, this step can be omitted, which is a waste of time.

code diff

{
  // diff
  "diffEditor.ignoreTrimWhitespace": false,
}

The diff behavior of vscode will ignore the trailing empty characters by default. In order to control the tail of the file more accurately, we need to be more sensitive, so turn off the ignore behavior.

Colored brackets / guide rail

{
  // Native reproduction color bracket
  "workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#ffd700",
    "editorBracketPairGuide.activeBackground1": "#ffd7007f",
    "editorBracketHighlight.foreground2": "#da70d6",
    "editorBracketPairGuide.activeBackground2": "#da70d67f",
    "editorBracketHighlight.foreground3": "#87cefa",
    "editorBracketPairGuide.activeBackground3": "#87cefa7f",
    "editorBracketHighlight.foreground4": "#ffd700",
    "editorBracketPairGuide.activeBackground4": "#ffd7007f",
    "editorBracketHighlight.foreground5": "#da70d6",
    "editorBracketPairGuide.activeBackground5": "#da70d67f",
    "editorBracketHighlight.foreground6": "#87cefa",
    "editorBracketPairGuide.activeBackground6": "#87cefa7f",
    "editorBracketHighlight.unexpectedBracket.foreground": "#ff0000",
  },
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
}

Because vscode is from V1 60 supports color brackets and guide rails natively and has excellent performance. We moved out of the bracket pair colorizer plug-in. See the following for details:

vscode1.60 native high-performance bracket colorizer seamless migration scheme

Benchmarking and differentiation of vscode1.62 native code block edge guide rail coloring and Bracket Pair Colorizer (with configuration)

theme

{
  // theme
  "workbench.colorTheme": "Dracula",
}

I like a dark theme without red very much Dracula Official .

jsx attr auto brackets

{
  // jsx auto complete
  "typescript.preferences.jsxAttributeCompletionStyle": "auto",
  "javascript.preferences.jsxAttributeCompletionStyle": "auto",
}

vscode v1.63 the automatic completion of parentheses for jsx attributes is more intelligent. See JSX attribute completions .

inline complete

{
  // inline complete
  "editor.inlineSuggest.enabled": true,
}

Options that need to be enabled when using automatic completion plug-ins such as Tabnine or github copilot.

other

{
  // svg formatter
  "[svg]": {
    "editor.defaultFormatter": "jock.svg"
  },
  // python format
  "[python]": {
    "editor.defaultFormatter": "ms-python.python"
  },
  // python language server engine
  "python.languageServer": "Pylance",
}

Postscript

In order to truly "know why", rather than simply copy and paste, this paper will not give a complete set of configuration collection. In addition, due to different habits, please take what you need by yourself.