I have installed ESLint, but as you know, it cannot check jQuery syntax. So I have npm installed:
https://github.com/jquery/eslint-config-jquery/blob/master/readme.md
However, I cannot find ESLint's .eslintrc file in order to edit it. According to the readme file, I should be adding this code to it:
{
"extends": "jquery"
}
How is this done?
according to latest update of ESLint, all you have to do is to add "jQuery" to your env and set it to True.
{
"env" : {
"jquery": true
},
}
I cannot find ESLint's .eslintrc file in order to edit it.
You simply create your own .eslintrc in the root of your project, then you can add the following code to it:
{
"extends": "jquery"
}
You can read more about ESLint configuration files here.
Related
I installed eslint-plugin-import-order and add it to eslintConfig in package.json.
Error I have:
Definition for rule 'import/order' was not found (import/order)
Please, help me to deal with it.
Sandbox: https://codesandbox.io/s/elegant-elbakyan-pilnc
Note: eslint-plugin-import-order has been deprecated. Please use this
https://github.com/benmosher/eslint-plugin-import
create a .eslintrc.json file and add the plugin like below.
{
....,
"extends": ["eslint:recommended", "plugin:import/errors", "plugin:import/warnings"],
"plugins": ["import"],
.....
}
Restart your local server once to ensure the changes are reflected.
Right now it's giving error that .png and .less files aren't valid, everything is invalid.
I want eslint to only look at .js and .jsx files.
I don't see any way to do that.
I did find eslintignore which is not the best way to do things.
I don't want to maintain a list of files to ignore.
Whitelist approach please.
You could make use of the property "overrides" on your .eslintrc file to include only the files/file types you want:
{
"overrides": [
{
"files": [ "src/**/*.js", "src/**/*.jsx" ]
}
]
}
Docs: https://eslint.org/docs/user-guide/configuring#example-configuration
I believe there is no way to configure it other than the arguments for the CLI
If you are running it through gulp, first pipe the src like
src(['**/*.js', '**/*.jsx'])
.pipe(eslint())
...
If you would rather do it via npm command, you can create a script in your package.json like so:
"scripts": {
...
"eslint": "eslint **/*.js **/*.jsx",
Then invoke it with npm run eslint
Recently, I've started using Visual Studio Code for my editor and found the Prettier - JavaScript formatter. I think it's a great plugin because it helps me keep my code looking nice.
I set up Airbnb's ESLint config and have found that to be super helpful.
Here's the catch. The Airbnb ESLint config I'm currently running doesn't play nice with Prettier. For example, for JavaScript string, Prettier is formatted to include double ticks and Airbnb's ESLint like single ticks. When I format the code using Prettier, then Airbnb's ESLint doesn't agree.
I know Kent Dodds has done some work with ESLint configs, among others, example here.
But I can't seem to find a solution that lets me use the magic of Prettier to format my code to Airbnb's ESLint.
I think eslint-config-prettier was created just for this purpose: https://prettier.io/docs/en/eslint.html#turn-off-eslint-s-formatting-rules
Basically it turns off all rules that have to do with code styling because prettier will take care of it anyway.
So you just install this config along with any other desired eslint config (like eslint-config-airbnb) and in your eslint configuration file you just add it to the extends field. For example:
{
"extends": ["airbnb", "prettier"]
}
Here are a few ways to do it, in order of recommendation. I would prefer the first approach as you won't ever have to bother with other rules that might conflict in future.
i) Install eslint-config-prettier and extend from it in .eslintrc. Doing this turns off some of the formatting-related rules within ESLint that might conflict with Prettier:
{
"extends": [
"airbnb",
"prettier"
]
}
ii) Adding "singleQuote": true to the .prettierrc config file:
{
"singleQuote": true,
...
}
iii) Adding a --single-quote command line option when you invoke Prettier:
$ prettier --single-quote ...
iv) Turn off ESLint's quotes rule within your .eslintrc config file (and potentially others that might conflict):
{
"rules": {
"quotes": "off",
...
}
}
A cleaner way is:
yarn add --dev eslint-plugin-prettier eslint-config-prettier
// .eslintrc
{
"extends": ["airbnb", "plugin:prettier/recommended"]
}
The plugin:prettier/recommended does three things:
Enables eslint-plugin-prettier.
Sets the prettier/prettier rule to "
Extends the eslint-config-prettier configuration.
And then if you are on react, you could add prettier/react too:
{
"extends": [
"airbnb",
"plugin:prettier/recommended",
"prettier/react"
]
}
Here is a little interactive CLI tool I built to setup ESLint with Prettier. Just install it and run:
npx eslint-prettier-init
Which will resolve your issue.
So, you have your .eslintrc file, with the property "extends": "airbnb"
Add another property, rules, and the rules that you will write in there will overwrite the ones inherited from airbnb
"extends": "airbnb",
"rules": {
"eqeqeq": 2,
"comma-dangle": 1,
}
Now here I'm just overwriting two random rules, you will need to look for the one you need :)
I am stuck with babili.
I need to transpile, then minify the javascript that is written in ES6. So I installed the package using:
npm install babili --save-dev
and made .babelrc file containing a preset:
{"presets": ["es2015"]}
Now I tried the following command
./node_modules/.bin/babili public/js/rt.socket.js --out-file public/test.min.js
It does give a minified but doesn't transpile. What could be the reason for this?
`
Babili does not use .babelrc. Per the README:
Note that, because the babili command uses the default preset with no-babelrc, you cannot set any non-default options in the preset's plugins with this command. To do this, you can use the babel command with the options set in a .babelrc. See the preset docs for more information on how to do this.
The solution is to instead use Babel with the babel-preset-babili preset, as described in the Babel preset section of the README (which assumes that you've already installed Babel):
Install
npm install babel-preset-babili --save-dev
Usage
You'll most likely want to use it only in the production environment.
Check out the env
docs for more help.
Options specific to a certain environment are merged into and overwrite non-env specific options.
.babelrc:
{
"presets": ["es2015"],
"env": {
"production": {
"presets": ["babili"]
}
}
}
Then you'll need to set the env variable which could be something like
BABEL_ENV=production npm run build
How do I tell an Atom linter, specifically js-standard, to ignore a rule? I want it ignored project-wide, and I thought that I could achieve this with a package.json or a .eslintrc but I can't get either to work. The rule I want to disable is camelcase
I should be able to do this in a package.json file, because the js-standard linter has an option called honorStyleSettings:
Honors style settings defined in package.json.
Current style settings supported:
ignore
parser
What's the syntax of these settings?
For the record, here's how to use js-standard in Atom while selectively disabling a certain rule.
Disable the linter-js-standard Atom package
Install linter-eslint
Add an .eslintrc file:
{
"extends": ["standard"],
"rules": {
"camelcase": 0
}
}
You may also need to install standard and eslint via npm, if you don't have them already.
Using the default install, there is no way to do this in linter-js-standard. (I believe this was a conscious decision on the part of the module authors who believe that standard is a hard target rather than an ideal.)
If you wish to use eslint-style comments to disable linting for certain lines or code sections, install babel-eslint via npm i --save-dev babel-eslint and add
{
...
"standard": {
"parser": "babel-eslint"
}
...
}
to your package.json file which will allow you to annotate your source as needed.
Example
Assuming foo is defined but not used elsewhere in your file, linter will warn: 'foo is assigned a value but never used. (no-unused-vars)'
const foo = 1
After installing babel-eslint, configuring standard in your package.json file, and adding this comment, linter will ignore the line.
const foo = 1 // eslint-disable-line
See Configuring ESLint for other configuration annotations.
I've managed to disable the "camelcase" rule by going to "linter-js-standard" package folder and adding to node_modules/standard/eslintrc.json file the following line:
"rules": { "camelcase": [0] }
So the entire "eslintrc.json" looks like:
{
"extends": ["standard", "standard-jsx"],
"rules": { "camelcase": [0] }
}
Just save or edit your .js file in Atom for the changes to take effect.
On my Linux desktop the full path to eslintrc.json is:
~/.atom/packages/linter-js-standard/node_modules/standard/eslintrc.json
Of course, when you update the "linter-js-standard" package in Atom, you'll have to do the above steps again.
To turn the "camelcase" rule on you may change the "camelcase" value to [2] instead of deleting the entire "rules" line:
"rules": { "camelcase": [2] }
If it is ESlint that your plugin uses then create a .eslintrc file in the root of your project & write your rules within there.
Heres an example of a .eslintrc file github example. I find i need to close and reopen Atom to refresh the lint errors
EDIT:
showEslintRules (default: false). You will need to change this option to true.