Talk about vscode configuration settings JSON knows why (with a large number of configurations)

Preface

vscode Configuration of settings.json It's a platitude , As time goes by, we may change him very frequently , But we should try to avoid a problem ：

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

It's really just a Know why The problem of .

Based on this topic , This article will analyze my settings.json , Hope to bring some help to readers .

Text

Some of the following plug-ins are configured from ：

《 front end web Develop efficiently vscode Plug in sharing （ Dialectical massive actual combat test ）》

The plug-ins mentioned in .

Save automatically

{
    
  //  Save automatically 
  "files.autoSave": "afterDelay",
}

Use vscode It is strongly recommended to enable autosave , Because lightning coding can't be done manually save , At the same time, you should have the ability to succeed once code style .

typeface

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

For font size , Generally, the screen is recommended to use 13 code , It's not particularly big , The amount of information presented is also sufficient .

Font recommendation , English is recommended JB The official of the family barrel JetBrains Mono Series of non contiguous Fonts , That is to say JetBrains Mono NL , You can jetbrains mono Download and install the font in its entirety , You can use it now . For isolated development scenarios against the sky , Please refer to the following to configure the font ：

《 vscode Do not install fonts to use local / Network font file change font method （ No administrator rights ）》

It is recommended to use in Chinese Isoline , This font is for in / Japan Text can provide a very smooth body feeling , There will be no edges and corners .

settings sync

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

In the early vscode Of settings Recommended Settings Sync The plug-in is synchronized to github gist On , Although later ms Acquisition github Later, I had financial support vscode Internal synchronization , But it is not very easy to use , Secondly, try not to do single point disaster recovery .

In order to ensure adequate safety , I still use Settings Sync Do manual sync Disaster tolerant （ As shown above , Automatic uploading and downloading are turned off , All manual use cmd + shift + p choice Sync: to update / Upload the configuration Command for manual synchronization ）.

If you want to use , After installing the plug-in , Agree to authorize according to the prompt github gist Just visit .

Code hinting

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

I won't elaborate here , Our strategy is ：

1. recentlyUsedByPrefix ： Press used prefix Prefix first match , It is convenient to select our preferred items .

2. automaticallyOverrodeDefaultValue ： Automatically override the priority defaults for prompts , It's also to keep the preference .

New window

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

vscode The default strategy is The new window overwrites the current window by default + The default preview state opens the file , This makes it inconvenient to switch between multiple files , Use double click to open problems that do not conform to customary habits .

So we went through newUntitledFile Keeping new files open must be an independent new window , collocation enablePreview: false Cancel preview mode , Ensure that the editing mode is stable .

Icon series

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

I like to use file / Folder icons The icon is Material Icon Theme , This plug-in has a large number of built-in icons , And it covers a lot of tools （ Such as commitlint / lerna etc. ） Configuration file for icon, It is very comfortable to use .

Document hierarchy

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

By default ,vscode and github bring into correspondence with , That is, when there is only one folder under a folder , Will skip the folder in the middle , The display will be abbreviated to one line （ This is in java And other object-oriented file hierarchies ）, But for the FE scene , It is not necessary to omit , The abbreviation will affect the layout of the project architecture , Therefore, it is recommended to close the folder abbreviation .

End of file

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

This is an old classic question , First, let's make two points clear ：

1. linux / mac / win The end of the file on is different

2. Git For different endings , Inconsistencies may arise on different platforms

Usually , We will use the workspace format .editorconfig collocation EditorConfig for VS Code The plug-in solves this problem , Uniformly specify it as linux Terminator lf ：

# .editorconfig
root = true

[*]
end_of_line = lf

But for not configured .editorconfig There is nothing we can do in our work area , So we should fundamentally solve this problem , The best way is from vscode Lock it up lf ending .

Git scm

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

Turn on intelligence commit, This is useful for scm gui Panels help a lot , Can help us in add When you get to the staging area , Use cmd + enter It's automatic add and commit all change .

notes ： If you're not vscode visualization Git gui Users , There is no need to configure this item , But it is recommended to use for simple operations vscode Native gui, This is in check change It's very convenient , And it can be very flexible to deal with most basic scenarios （ push / merge etc. ）

vscode update

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

close vscode Automatic update prompt , We can upgrade manually on a regular basis , Pay attention to a comprehensive understanding of changelog For instant access to new features .

Delete confirmation

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

Flexible development does not require the deletion of secondary confirmations , Because we want the smooth and seamless operation , You can also use cmd + z Undo the deletion .

Terminal behavior

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

adopt code runner Plug in to make every time you open the terminal in the currently selected folder , This requires some configuration , See ：

《 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",
}

about vscode Plug in behavior , We make several configurations ：

1. close vscode Recommended plug-in behavior . As a mature developer, you should understand what you are doing , Know what you need 、 It doesn't need anything , So we don't need “ primary ” A hint of .

2. Only enabled plug-ins can turn on automatic update Update features , Prevent the disabled plug-ins from wasting resources while updating in the background .

Translation plug-ins

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

Selection of translation plug-ins , It is recommended to use three models at the same time , See ：

《 vscode The best combination of translation plug-ins 、 Translation variables 、 Delimitation translation 、 Translation from Chinese to English （ Improve production efficiency ） 》

meanwhile , We configure it as follows ：

1. googleTranslateExt.replaceText ： Open translation replacement , bring Google Translate The plug-in can overwrite our Chinese selection with English .（ Of course , I would recommend deepl Translation ）

2. commentTranslate.targetLanguage ： Appoint Comment Translate The translation language object of the plug-in is Chinese , For our convenience hover View the Chinese translation of the notes .

3. varTranslation.translationEngine ： Appoint Hump translation assistant Translation api go google , According to your network , It is recommended to choose the best translation source on your own network （ Of course, the quality of translation is also very different ）.

File format

{
    
  //  Default Formatting , Uniform for  prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // prettier global config
  "prettier.semi": false,
  "prettier.printWidth": 80,
  "prettier.singleQuote": true,
}

A hundred flowers bloom in the early stage , We also need Beautify / Beautify css And other plug-ins configure different formatters according to different files , But now prettier Has developed very mature ,prettier The supported file formats are prettier Format best practices , So we configure the Default Formatting behavior to use prettier that will do , This can save us a lot of formatting configuration for different files .

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

eslint

{
    
  // eslint config
  "editor.codeActionsOnSave": {
    
    "source.fixAll.eslint": true,
  },
  // eslint  Automatically identify workspaces 
  "eslint.workingDirectories": [{
     "mode": "auto" }],
}

about eslint All configurations need to be installed eslint Plug in for （ ESLint ）, And then cmd + s Save auto repair open （ source.fixAll.eslint ）, It is convenient for us to format the code manually at any time .

At the same time monorepo scene ,eslint Plug ins tend to look at the top eslintrc The configuration file , Single... Is ignored project Folder eslint To configure , So we need to open auto Automatic pattern recognition , To better cope with monorepo scene .

Vue

{
    
  //  prevent  vetur  Report errors 
  "vetur.validation.template": false,
  // "vetur.validation.script": false,
}

stay vue 2 At the time of development , Use vetur Be supported , In order to prevent template Parse error , We need to turn off the corresponding verification behavior , This is also an old saying .

According to the circumstances , You may also need to turn it off script The verification behavior of the zone .

svg

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

preview svg View the source code directly , Instead of previewing the image , This is convenient for us to modify the color and other behaviors .

In preview , It is recommended that you use a plug-in to support svg preview .

live-server

{
    
  // liveserver  Turn off the service prompt 
  "liveServer.settings.donotShowInfoMsg": true,
}

It is often necessary to start locally server when , It often uses Live Server plug-in unit , The plug-in is starting server Then there will be a startup port A hint of , You need to turn it off manually every time , For developers who often use the plug-in , You can omit this step from wasting time .

code diff

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

vscode Of diff Behavior ignores trailing empty characters by default , In order to control the end of the file more accurately , We need to be more sensitive , So turn off ignore behavior .

Color brackets / Guide

{
    
  //  Original reproduction   Color brackets 
  "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 since v1.60 Start native support for colored brackets and guides , And excellent performance , We from Bracket-Pair-Colorizer Plug in migration , See ：

《 vscode1.60 Native high-performance seamless migration scheme （ Equivalent Bracket-Pair-Colorizer） 》

《 vscode1.62 Native code block edge shading and Bracket Pair Colorizer Benchmarking and differentiation （ Attached configuration ） 》

The theme

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

I like it very much No red Dark theme Dracula Official .

jsx attr auto brackets

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

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

inline complete

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

Use Tabnine or github copilot And other automatic completion plug-ins .

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 really do “ Know why ” , Instead of simply copying and pasting , This article will not give a complete set of configurations , Plus the difference in habits , Please choose what you need .