VSCode is a powerful open-source IDE that can easily replace Sublime Text. It's cross-platform and offers a more convenient experience for developers. After using it for some time, 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 I've added several essential plugins to enhance my workflow. On the left side of the main UI, there's a toolbar where you can manage your installed extensions, as shown in the image below.
**Beautify**
This plugin helps format your code neatly, making it more readable and consistent.
**ESLint**
A must-have for any JavaScript project, ESLint helps identify and fix issues in your code. Here’s my `.eslintrc` configuration:
```javascript
module.exports = {
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 most ES6 features, this plugin is essential for writing modern JavaScript.
**Numbered Bookmarks**
Though limited in functionality, this plugin allows you to bookmark specific lines of code.
**TortoiseSVN**
Even though I primarily use Git, this plugin is still useful for working with SVN repositories.
**VSCode Great Icons**
This extension adds icons for different file types, making the file tree more intuitive and easier to navigate.
**Path Intellisense**
Helps auto-complete file paths when using `import`, improving productivity.
**Better Align**
Useful for aligning text or code in a clean and organized way.
**Babel ES6/ES7**
Provides syntax highlighting and checks for ES6 and ES7 features.
**List of Recommended Plugins**
- **Auto Close Tag**: Automatically closes HTML tags.
- **Auto Rename Tag**: Automatically updates matching tags when you change one.
- **Bookmarks**: Adds line bookmarks for quick 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 your code.
- **Color Picker**: Allows selecting colors directly from the editor.
- **Document This**: Generates documentation comments.
- **EditorConfig**: Supports `.editorconfig` files for consistent formatting.
- **Emoji**: Insert emojis directly into your code.
- **ESLint**: Integrates with ESLint for real-time feedback.
- **File Peek**: Quickly locate files by path.
- **Font Awesome**: Provides hints for Font Awesome classes in HTML.
- **FTP Sync**: Synchronizes files with an FTP server.
- **Git Blame**: Shows Git information for each line in the status bar.
- **Git History**: Views the commit history of a file.
- **GitLens**: Displays commit information for each line.
- **Guides**: Highlights indentation lines for better structure.
- **Gulp Snippets**: Offers Gulp-related code snippets.
- **HTML CSS Class Completion**: Provides CSS class suggestions.
- **HTML CSS Support**: Offers CSS autocompletion, especially for Vue projects.
- **HTMLHint**: Validates HTML structure.
- **Indenticator**: Highlights indentation levels.
- **JavaScript (ES6) Code Snippets**: ES6 syntax code snippets.
- **Language-Stylus**: Syntax highlighting for Stylus.
- **Lodash**: Lodash code snippets.
- **Markdownlint**: Validates Markdown formatting.
- **MochaSnippets**: Mocha test code snippets.
- **Node Modules Resolve**: Quickly navigates to Node modules.
- **NPM**: Runs NPM commands directly in VSCode.
- **NPM Intellisense**: Autocompletes module names when importing.
- **Output Colorizer**: Colors terminal output for better readability.
- **Partial Diff**: Compares two pieces of code or files.
- **Path Autocomplete**: Auto-completes file paths.
- **Prettify JSON**: Formats JSON code neatly.
- **Project Manager**: Switch between projects quickly.
- **REST Client**: Sends RESTful HTTP requests.
- **Settings Sync**: Syncs settings via Gist.
- **String Manipulation**: Converts strings (e.g., camelCase, snake_case).
- **Test Spec Generator**: Generates test cases for testing frameworks.
- **TODO Parser**: Manages TODO comments.
- **Version Lens**: Shows version info for packages in `package.json`.
- **Vetur**: Excellent Vue.js syntax highlighting.
- **View Node Package**: Opens the homepage of a package.
- **VSCode Icons**: Adds file icons for easy identification.
- **VueHelper**: Offers Vue 2 code snippets and API support.
**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
}
```
These plugins and configurations have significantly improved my development experience in VSCode. Whether you're working with JavaScript, Vue, or other technologies, these tools make the process smoother and more efficient.
Electrical Ceramics,Conductive Ceramics,Electrically Conductive Ceramics,Electro Ceramics
Yixing Guangming Special Ceramics Co.,Ltd , https://www.yxgmtc.com