Visual Studio Code (VSCode) is an excellent open-source IDE that can fully replace Sublime Text, and it's also cross-platform, making it more convenient to use. After using it for a while, I've found several plugins worth recommending. My current development environment runs on Windows 10 with VSCode and Node.js.
Over time, I've grown more fond of VSCode and have added several useful extensions to enhance my workflow. The plugin manager in the left toolbar of the main UI is where you can manage all your installed extensions, as shown below.
**Beautify**
This is a code beautification plugin that helps keep your code clean and consistent. It’s essential for maintaining readability across different files.
**ESLint**
This is a must-have plugin for code quality checks. It enforces best practices and helps catch errors early. Below is my `.eslintrc` configuration:
```json
{
"env": {
"commonjs": true,
"es6": true,
"node": true
},
"parser": "babel-eslint",
"parserOptions": {
"sourceType": "module"
},
"extends": "eslint:recommended",
"rules": {
"no-console": 0,
"semi": [2, "always"],
"no-this-before-super": 2,
"no-var": 2,
"no-cond-assign": 2,
"no-dupe-args": 2,
"no-dupe-keys": 2,
"no-duplicate-case": 2,
"no-extra-semi": 0,
"no-constant-condition": 0,
"no-ex-assign": 2,
"no-func-assign": 2,
"no-irregular-whitespace": 2,
"no-negated-in-lhs": 2,
"no-obj-calls": 2,
"no-unreachable": 2,
"use-isnan": 2,
"default-case": 2,
"no-invalid-this": 2,
"consistent-return": 0,
"valid-jsdoc": 2,
"block-scoped-var": 0,
"complexity": [2, 20],
"require-yield": 0,
"no-mixed-spaces-and-tabs": 2,
"require-jsdoc": [2, {
"require": {
"FunctionDeclaration": true,
"MethodDefinition": false,
"ClassDeclaration": false
}
}],
"linebreak-style": 0
}
}
```
**JavaScript (ES6) Code Snippets**
Since Node.js 6.x supports a lot of ES6 features, this plugin is essential for developers who want to take full advantage of modern JavaScript syntax.
**Numbered Bookmarks**
A simple bookmarking tool, though not as powerful as some alternatives, it still helps when working with large files.
**TortoiseSVN**
Although Git is widely used, this SVN integration plugin is still very useful for teams that rely on Subversion.
**VSCode Great Icons**
This extension adds icons for every file type, making the project structure much more intuitive and visually appealing.
**Path Intellisense**
When using `import`, this plugin provides path suggestions, making navigation easier.
**Better Align**
This plugin helps align code elements, improving readability and consistency.
**Babel ES6/ES7**
This plugin highlights and checks ES6 and ES7 syntax, which is especially helpful when working with modern JavaScript.
**List of Recommended Plugins**
Here are some additional useful extensions:
- **Auto Close Tag**: Automatically closes HTML tags.
- **Auto Rename Tag**: Automatically renames matching HTML tags.
- **Bookmarks**: Adds line bookmarks for easy navigation.
- **Can I Use**: Checks browser compatibility for HTML5, CSS3, and SVG.
- **Code Runner**: Runs selected code snippets in various languages, including Node.js.
- **CodeBing**: Opens a search engine within VSCode.
- **Color Highlight**: Highlights color values in the code.
- **Color Picker**: Picks colors directly from the editor.
- **Document This**: Generates documentation comments.
- **EditorConfig**: Applies EditorConfig settings.
- **Emoji**: Inserts emojis into the code.
- **ESLint**: Provides linting and error highlighting.
- **File Peek**: Quickly locates files based on path strings.
- **Font Awesome**: Adds Font Awesome hints for HTML.
- **FTP Sync**: Synchronizes files with an FTP server.
- **Git Blame**: Shows Git information for the current line.
- **Git History**: Views the git log.
- **GitLens**: Displays commit history and author info.
- **Guides**: Highlights indentation lines.
- **Gulp Snippets**: Adds Gulp code snippets.
- **HTML CSS Class Completion**: Offers CSS class suggestions.
- **HTML CSS Support**: Supports Vue and provides CSS hints.
- **HTMLHint**: Formats and validates HTML.
- **Indenticator**: Highlights indentation.
- **JavaScript (ES6) Code Snippets**: Adds ES6 code snippets.
- **Language-Stylus**: Highlights Stylus syntax.
- **Lodash**: Adds Lodash code snippets.
- **Markdownlint**: Validates Markdown formatting.
- **MochaSnippets**: Adds Mocha test snippets.
- **Node Modules Resolve**: Quickly navigates to Node modules.
- **NPM**: Runs npm commands.
- **NPM Intellisense**: Provides module name suggestions.
- **Output Colorizer**: Colors terminal output.
- **Partial Diff**: Compares two pieces of code or files.
- **Path Autocomplete**: Provides path suggestions.
- **Prettify JSON**: Formats JSON files.
- **Project Manager**: Switches between projects quickly.
- **REST Client**: Sends RESTful HTTP requests.
- **Settings Sync**: Syncs VSCode settings to Gist.
- **String Manipulation**: Converts strings (camelCase, snake_case, etc.).
- **Test Spec Generator**: Generates test cases.
- **TODO Parser**: Manages TODO items.
- **Version Lens**: Shows package versions.
- **Vetur**: Enhances Vue syntax highlighting.
- **View Node Package**: Opens the homepage of a module.
- **VSCode Icons**: Adds file icons.
- **VueHelper**: Adds Vue 2 code snippets.
**Appendix: VSCode Preferences Configuration**
```json
{
"editor.tabSize": 2,
"files.associations": {
"*.vue": "vue"
},
"eslint.autoFixOnSave": true,
"eslint.options": {
"extensions": [".js", ".vue"]
},
"eslint.validate": ["javascript", "javascriptreact", "vue", "vue-html"],
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/dist": true
},
"emmet.syntaxProfiles": {
"javascript": "jsx",
"vue": "html",
"vue-html": "html"
},
"extensions.autoUpdate": true,
"editor.renderWhitespace": "boundary",
"editor.cursorBlinking": "smooth",
"workbench.welcome.enabled": true
}
```
Overall, VSCode has become my go-to editor for web and backend development, and these plugins have significantly improved my productivity. Whether you're working with JavaScript, Vue, or Node.js, there's a plugin for almost everything.
ceramic piston
Yixing Guangming Special Ceramics Co.,Ltd , https://www.yxgmtc.com