To do a good job, he must sharpen his tools
As a front-end worker, an editor or IDE is especially important for development. How do you create your own development environment in 1 minute
vscode
Choose a suitable editor or IDE, VScode not to mention, free, rich plug-ins and Microsoft’s tough development community, as well as fast response speed quickly gained a large number of users, let’s introduce this plug-in and configuration file. This article is written using the latest version 1.37.1. It is possible that a later version will integrate some plugins. This article will be updated at any time
Vscode plug-in
Chinese (Simplified) Language Pack for Visual Studio Code
English menus become friendly in Chinese, allowing developers to learn more about their editors
Theme – One Dark Pro
There are many themes on vscode, I use this one
We can also according to their own preferences to the official plugin
Bracket color – Bracket Pair Colorizer2
In addition, VSCode will also compile a JS outline, which can help developers see the code structure better, especially when reading other people’s code
Git Enhancement – GitLens
Vscode will integrate git itself, but there are always some areas where the experience is not good. This is where the plug-in can be used. In addition, Git History is also worth recommending, which pays more attention to comparison, but I think it is good enough. If VScode itself has met the requirements of Git, there is no need to install many similar plug-ins; Git Easy is also a popular plugin, you can go to search
Shortcut – Sublime Importer for VS Code
Seamlessly switch familiar shortcuts; There are other options; Or set it up yourself (time-consuming)
HTML To modify paired tags – Auto Rename Tag
As we all agreed, there is a plugin
Auto Close Tag
Automatically close HTML tags, I did not actually check vscode itself is not this function, or very convenient
File Management – Project Manager
You can quickly manage the projects you often use
Code formatting and beautification
Eslint: Code checks global installation of ESlit
npm i eslint -g
Copy the codeThe eslit plug-in needs to be installed in this project
Vetur: format vue Prettier: format JS/TS/CSS without going into details, don’t worry
Visual Studio IntelliCode
I don’t feel much when I’m writing code, the AI can only tell you when you’re writing code, it remains to be seen if it’s worth it
Here comes the emphasis, one minute configuration
Synchronize configuration – Settings Sync
Synchronize your plugin configuration and your editor configuration to GIST. It’s easy to quickly configure gist on different computers. It should take no more than a few minutes
Can fork my synchronized configuration
Through these plug-ins, basically has met the daily needs, we can also put your feel good, some of their better application scenarios, comments out, for everyone to learn to use, do not have to spend a long time to configure nothing to do with the code
Configuration to take away
{
"workbench.sideBar.location": "right".
"workbench.colorTheme": "One Dark Pro".
"workbench.iconTheme": "vscode-icons".
"editor.detectIndentation": false.
"editor.tabSize": 2.
"editor.lineHeight": 24.
"editor.fontSize": 18.
"editor.renderWhitespace": "all".
"editor.formatOnSave": true.
"editor.snippetSuggestions": "top".
// "editor.wordWrapColumn": 80.
"editor.wordWrap": "on".
"files.eol": "\n".
"sync.autoUpload": false.
"sync.removeExtensions": true.
"sync.quietSync": false.
"sync.autoDownload": false.
"sync.forceUpload": true.
"sync.gist": "09ea04836d56aeaefd8907f46a9f13e2".
"merge-conflict.autoNavigateNextConflict.enabled": true.
"typescript.updateImportsOnFileMove.enabled": "always".
"vetur.format.defaultFormatter.html": "prettyhtml".
"vetur.format.defaultFormatter.js": "vscode-typescript".
// "vetur.format.options.useTabs": true.
"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
"printWidth": 90
}
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true.
"source.fixAll.tslint": false
},
// "prettier.printWidth": 90.
// "prettier.singleQuote": true.
// "prettier.eslintIntegration": true.
// "prettier.tslintIntegration": false.
"eslint.alwaysShowStatus": true.
"eslint.validate": [
"javascript".
"javascriptreact".
{
"language": "vue".
"autoFix": true
}
].
"eslint.enable": true.
"eslint.autoFixOnSave": true.
"path-intellisense.autoSlashAfterDirectory": true.
"path-intellisense.showHiddenFiles": true.
"path-intellisense.extensionOnImport": true.
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe".
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"git.enableSmartCommit": true.
"git.showPushSuccessNotification": true.
"javascript.updateImportsOnFileMove.enabled": "always".
"editor.suggestSelection": "first".
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue".
"task.slowProviderWarning": [
"typescript"
].
}
Copy the codeRemove the above configuration and you can use it
The 2019-10-15 update
Please follow my official account
