• Stars
    star
    119
  • Rank 287,332 (Top 6 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated 8 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

VS Code extension for JavaScript Standard Style (`standard`) with automatic fixing

vscode-standard

Visual Studio Code extension for JavaScript Standard Style with automatic fixing.

Node.js CI Visual Studio Marketplace Downloads Visual Studio Marketplace TypeScript Standard Style

Standard - JavaScript Style Guide

How to use

  1. Install the 'StandardJS - JavaScript Standard Style' extension

    Launch VSCode Quick Open (โŒ˜+P), paste the following command, and press enter.

    ext install standard.vscode-standard
    

    For more information, take a look at the documentation.

  2. Install the engine standard, semistandard, standardx or ts-standard

    This can be done globally or locally. We recommend that you install them locally (i.e. saved in your project's devDependencies), to ensure that other developers have it installed when working on the project.

  3. Enable the extension

    That's it! The extension will automatically be enabled in projects that has one of the engines installed in devDependencies in package.json.

Extension options

We give you some options to customize vscode-standard in your VSCode settings.json.

Option Description Default
standard.enable enable or disable JavaScript Standard Style true
standard.enableGlobally enable or disable JavaScript Standard Style globally false
standard.run run linter onSave or onType onType
standard.autoFixOnSave enable or disable auto fix on save. It is only available when VSCode's files.autoSave is either off, onFocusChange or onWindowChange. It will not work with afterDelay. false
standard.nodePath use this setting if an installed standard package can't be detected. null
standard.validate an array of language identifiers specify the files to be validated ["javascript", "javascriptreact", "typescript", "typescriptreact]
standard.workingDirectories an array for working directories to be used. []
standard.engine You can use semistandard, standardx or ts-standard instead of standard. Just make sure you've installed the semistandard, the standardx or the ts-standard package, instead of standard. standard
standard.usePackageJson if set to true, JavaScript Standard Style will use project's package.json settings, otherwise globally installed standard module is used true
standard.treatErrorsAsWarnings Any linting error reported by Standard will instead be displayed as a warning within VS Code. false

Configuring Standard

You can still configure standard itself with the standard.options setting, for example:

"standard.options": {
 "globals": ["$", "jQuery", "fetch"],
 "ignore": [
  "node_modules/**"
 ],
 "plugins": ["html"],
 "parser": "babel-eslint",
 "envs": ["jest"]
}

It's recommended to change these options in your package.json file on a per-project basis, rather than setting them globally in settings.json. For example:

"standard": {
 "plugins": ["html"],
 "parser": "babel-eslint"
}

If you've got multiple projects within a workspace (e.g. you're inside a monorepo), VSCode prevents extensions from accessing multiple package.json files.

If you want this functionality, you should add each project folder to your workspace (File -> Add folder to workspace...). If you can't see this option, download the VSCode Insiders Build to get the latest features.

Commands

When you open the Command Palette in VSCode (โ‡งโŒ˜P or Ctrl+Shift+P), this plugin has the following options:

  • Fix all auto-fixable problems - applies JavaScript Standard Style auto-fix resolutions to all fixable problems.
  • Disable JavaScript Standard Style for this Workspace - disable JavaScript Standard Style extension for this workspace.
  • Enable JavaScript Standard Style for this Workspace - enable JavaScript Standard Style extension for this workspace.
  • Show output channel - view the linter output for JavaScript Standard Style.

FAQ

  1. How do I lint script tags in vue or html files?

    You can lint them with eslint-plugin-html. Make sure it's installed, then enable linting for those file types in your settings.json:

    "standard.validate": [
     "javascript",
     "javascriptreact",
     "html"
    ],
    "standard.options": {
     "plugins": ["html"]
    },
    "files.associations": {
     "*.vue": "html"
    },

    If you want to enable autoFix for the new languages, you should enable it yourself:

    "standard.validate": [
     "javascript",
     "javascriptreact",
     {
      "language": "html",
      "autoFix": true
     }
    ],
    "standard.options": {
     "plugins": ["html"]
    }

How to develop

  1. Fork this repo, and clone your fork locally.
  2. Run npm install right under project root.
  3. Open project in VSCode. The plugin should be disabled whilst developing.
  4. Run the watch build task (โ‡งโŒ˜B or Ctrl+Shift+B) to compile the client and server.
  5. To run/debug the extension, use the Launch Client launch configuration (from the VSCode debug panel).
  6. To debug the server, use the Attach to Server launch configuration.

How to package

  1. Run npm install
  2. Run npm run package to build a .vsix file
  3. You can install it with code --install-extension vscode-standard.vsix

License

MIT

More Repositories

1

standard

๐ŸŒŸ JavaScript Style Guide, with linter & automatic code fixer
JavaScript
28,824
star
2

eslint-config-standard

ESLint Config for JavaScript Standard Style
TypeScript
2,546
star
3

semistandard

๐Ÿฆ All the goodness of `standard/standard` with semicolons sprinkled on top.
JavaScript
1,383
star
4

eslint-config-standard-react

ESLint Shareable Config for React/JSX support in JavaScript Standard Style
JavaScript
453
star
5

ts-standard

Typescript style guide, linter, and formatter using StandardJS
JavaScript
428
star
6

snazzy

Format JavaScript Standard Style as Stylish (i.e. snazzy) output
JavaScript
420
star
7

awesome-standard

Documenting the explosion of packages in the standard ecosystem!
383
star
8

standardx

๐Ÿ’ฅ JavaScript Standard Style with custom tweaks
JavaScript
144
star
9

standard-engine

๐Ÿš’ The guts of `standard` modularized for reuse
JavaScript
144
star
10

eslint-plugin-standard

ESlint Rules for the Standard Linter
JavaScript
124
star
11

eslint-config-standard-jsx

ESLint Shareable Config for JSX support in JavaScript Standard Style
JavaScript
102
star
12

standard-loader

webpack loader for linting your code with https://github.com/feross/standard
JavaScript
68
star
13

eslint-config-semistandard

๐Ÿ’ฏ semistandard eslint sharable config
JavaScript
61
star
14

atom-standardjs-snippets

โšก A collection of JavaScript snippets for Atom, Standard Style
CoffeeScript
48
star
15

deglob

๐Ÿ“‚ Take a list of glob patterns and return an array of file locations, respecting `.gitignore` and allowing for ignore patterns via `package.json`.
JavaScript
39
star
16

atom-standard-formatter

Atom package to format code using Javascript Standard Style.
JavaScript
35
star
17

standard-packages

List of packages that use `standard`
JavaScript
33
star
18

standard-www

๐Ÿ‘† Website for JavaScript Standard Style (@standard)
CSS
30
star
19

standard-json

๐Ÿ”›Format JavaScript Standard Style output to a JSON array.
JavaScript
21
star
20

standard-tap

๐Ÿšฐ Format JavaScript Standard Style as TAP output
JavaScript
17
star
21

brackets-standard

Brackets extension for standard, a simple linter with sensible defaults. No longer maintained, Try using https://github.com/zaggino/brackets-eslint and https://github.com/feross/eslint-config-standard
JavaScript
10
star
22

.github

9
star
23

standard-demo

๐Ÿฐ Web demo of JavaScript Standard Style (Work In Progress)
JavaScript
9
star
24

standardizer

๐Ÿ’ซ A tiny service to lint and format JavaScript code using JavaScript Standard Style.
JavaScript
8
star