Giter Site home page Giter Site logo

vscode-eslint's Introduction

VS Code ESLint extension

Integrates ESLint into VS Code. If you are new to ESLint check the documentation.

The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version. If you haven't installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.

On new folders you might also need to create a .eslintrc configuration file. You can do this by either using the VS Code command Create '.eslintrc.json' file or by running the eslint command in a terminal. If you have installed eslint globally (see above) then run eslint --init in a terminal. If you have installed eslint locally then run .\node_modules\.bin\eslint --init under Windows and ./node_modules/.bin/eslint --init under Linux and Mac.

Settings Options

This extension contributes the following variables to the settings:

  • eslint.enable: enable/disable eslint. Is enabled by default.
  • eslint.packageManager: controls the package manager to be used to resolve the ESLint library. This has only an influence if the ESLint library is resolved globally. Valid values are "npm" or "yarn".
  • eslint.options: options to configure how eslint is started using the ESLint CLI Engine API. Defaults to an empty option bag. An example to point to a custom .eslintrc.json file is:
{
	"eslint.options": { "configFile": "C:/mydirectory/.eslintrc.json" }
}
  • eslint.run - run the linter onSave or onType, default is onType.
  • eslint.autoFixOnSave - enables auto fix on save. Please note auto fix on save is only available if VS Code's files.autoSave is either off, onFocusChange or onWindowChange. It will not work with afterDelay.
  • eslint.nodePath - use this setting if an installed ESLint package can't be detected, for example /myGlobalNodePackages/node_modules.
  • eslint.validate - an array of language identifiers specify the files to be validated. Something like "eslint.validate": [ "javascript", "javascriptreact", "html" ]. If the setting is missing, it defaults to ["javascript", "javascriptreact"]. You can also control which plugins should provide autofix support. To do so simply provide an object literal in the validate setting with the properties language and autoFix instead of a simple string. An example is:
"eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix": true } ]
  • eslint.workingDirectories - an array for working directories to be used. ESLint resolves configuration files relative to a working directory. This new settings allows users to control which working directory is used for which files. Consider the following setups:
client/
  .eslintignore
  .eslintrc.json
  client.js
server/
  .eslintignore
  .eslintrc.json
  server.js

Then using the setting:

  "eslint.workingDirectories": [
    "./client", "./server"
  ]

will validate files inside the server directory with the server directory as the current working directory. Same for files in the client directory. If the setting is omitted the working directory is the workspace folder.

Commands:

This extension contributes the following commands to the Command palette.

  • Create '.eslintrc.json' file: creates a new .eslintrc.json file.
  • Fix all auto-fixable problems: applies ESLint auto-fix resolutions to all fixable problems.
  • Disable ESLint for this Workspace: disables ESLint extension for this workspace.
  • Enable ESLint for this Workspace: enable ESLint extension for this workspace.

Using the extension with VS Code's task running

The extension lints an individual file only. If you want to lint your entire workspace or project and want to see the warnings in the Problems panel, then you can define a VS Code task which extracts VS Code problems from the ESLint output. To do so use the following tasks.json and tweak the args (*.js) to your setup:

{
	"version": "0.1.0",
	"windows": {
		"command": ".\\node_modules\\.bin\\eslint"
	},
	"linux": {
		"command": "./node_modules/.bin/eslint"
	},
	"osx": {
		"command": "./node_modules/.bin/eslint"
	},
	"isShellCommand": true,
	"args": ["*.js"],
	"showOutput": "silent",
	"problemMatcher": "$eslint-stylish"
}

Please note that the above example assumes that ESLint is installed locally in your workspace.

vscode-eslint's People

Contributors

dbaeumer avatar mysticatea avatar joshunger avatar darkred avatar bpasero avatar tyriar avatar fuzinato avatar egamma avatar giovannicalo avatar scharf avatar msftgits avatar paulirish avatar chenxsan avatar

Watchers

James Cloos avatar  avatar

vscode-eslint's Issues

Error: Cannot find module 'c:\Program Files\Microsoft VS Code\resources\app\node_modules\spdlog\build\spdlog.node'

Error: Cannot find module 'c:\Program Files\Microsoft VS Code\resources\app\node_modules\spdlog\build\spdlog.node'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at bindings (c:\Program Files\Microsoft VS Code\resources\app\node_modules\bindings\bindings.js:81:44)
    at Object.<anonymous> (c:\Program Files\Microsoft VS Code\resources\app\node_modules\spdlog\index.js:3:35)
    at Object.<anonymous> (c:\Program Files\Microsoft VS Code\resources\app\node_modules\spdlog\index.js:21:3)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.