I'm trying to set some ESLint rules to my new Vue project extending both eslint-plugin-vue and airbnb. I could set up everything just fine, except for the tag inside Vue components.
The accepted default would be like:
<script>
export default {
name: 'Login',
};
</script>
However I'm trying to get this code style to be accepted:
<script>
export default {
name: 'Login',
};
</script>
Using the rule vue/script-indent ( https://eslint.vuejs.org/rules/script-indent.html ) I could get the job done with the baseIndent set to 1. However, the lint rule is still complaining about it.
I tried placing this in this .eslintrc.json file:
"overrides": [
{
"files": [",*.vue"],
"rules": {
"indent": "off"
}
}
]
Also tried using the ignoredNodes from indent rules ( https://eslint.org/docs/rules/indent ) however I think I couldn't get my AST selectors right.
This is my current .eslintrc.json file:
{
"extends": [
"plugin:vue/recommended",
"#vue/airbnb"
],
"rules": {
"indent": [2, 4],
"vue/html-indent": [2, 4],
"vue/script-indent": [2, 4, {
"baseIndent": 1
}],
"vue/singleline-html-element-content-newline": 0,
"vue/eqeqeq": 2
},
"plugins": [
"html"
]
}
I get these errors when running lint:
8:1 error Expected indentation of 0 spaces but found 4 indent
9:1 error Expected indentation of 4 spaces but found 8 indent
10:1 error Expected indentation of 0 spaces but found 4 indent
If you're using VSCode, this setting will probably help you out:
// settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
// ...
}
At the time I saved the file before this setting, it linted with rules that wasn't defined by me even though I've written them on .eslintrc.js.
This setting made it work just fine.
But also check out the conflicts between eslint-plugin-html and eslint-plugin-vue.
Related
I've got a class definition that is too long for a single line. Prettier tries to wrap it but when it does it adds an indentation, which I think is correct. But ESLint doesn't like this so it throws an indent error.
There seems to be no config in ESLint to change this behaviour.
Prettier output:
// ESLint throws an error
export default class FormFieldTemplateCheckboxList
implements ClassComponent<FormFieldTemplateCheckboxListProps> {}
ESLint output:
// Prettier formats to the above on save
export default class FormFieldTemplateCheckboxList
implements ClassComponent<FormFieldTemplateCheckboxListProps> {}
It's a loop of ESLint and Prettier clashing with what they think is correct.
Partial Fix
This fix requires the eslint-config-prettier plugin, and removing indent from the eslint rules.
My old .eslintrc.json included the following;
"rules": {
"indent": ["error", "tab", { "SwitchCase": 1 }]
}
Now prettier controls the indentation. Now there is no error being thrown, which is what I want to occur.
I haven't found a solution that keeps the indent rules in eslint, but what I've found in my opinion is better.
Remove the indent rule from .eslintrc.json
"rules": {
// "indent": ["error", "tab", { "SwitchCase": 1 }]
// ...
}
This will now not show any errors with indents. To fix this I installed eslint-plugin-prettier.
Put prettier in the plugins list, and then add prettier/prettier in the rules and set it to either error or warn.
This will show an error or warning based on any prettier issues, including indent.
"plugins": [
"prettier"
// ...
],
"rules": {
"prettier/prettier": "error",
// ...
}
I'm not sure if there's a way to change the severity based on the prettier rule.
when I build my program，somethin is happen;
How to fix it? I dont want to ignore this;
I google some question that tell me change the component order,but I check my code ,It doesnt work;
how to fix that?
And Has any can tell me What's the meaning of ",,,"。whats the different between "," and ",,," ?
Looking forward to the answer
Conflicting order. Following module has been added:
* css ./node_modules/_css-loader#3.6.0#css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/_vue-loader#15.9.7#vue-loader/lib/loaders/stylePostLoader.js!./node_modules/_postcss-loader#3.0.0#postcss-loader
/src??ref--6-oneOf-1-2!./node_modules/_cache-loader#4.1.0#cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader#15.9.7#vue-loader/lib??vue-loader-options!./src/xmgl/contract/supplier/supplier_contract
_tab.vue?vue&type=style&index=0&id=72731489&scoped=true&lang=css&
despite it was not able to fulfill desired ordering with these modules:
* css ./node_modules/_css-loader#3.6.0#css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/_vue-loader#15.9.7#vue-loader/lib/loaders/stylePostLoader.js!./node_modules/_postcss-loader#3.0.0#postcss-loader
/src??ref--6-oneOf-1-2!./node_modules/_cache-loader#4.1.0#cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader#15.9.7#vue-loader/lib??vue-loader-options!./src/xmgl/common/vue/print_preview.vue?vue&ty
pe=style&index=0&id=0eed940e&scoped=true&lang=css&
- couldn't fulfill desired order of chunk group(s) , , ,
- while fulfilling desired order of chunk group(s) ,
warning
Result:
Component A and component B have different import order in different file, while component A and component B have same CSS style but different config. Plugin will be confused by a important feature 'Cascading' in CSS.
More explain can be find in here: https://www.py4u.net/discuss/1057823
Resolve:
ignore warning
Obviously, it is not a good idea. But I also will show how to config that.
You should find webpack.config.js and add some code in below
plugins: [
new MiniCssExtractPlugin({
// ......
ignoreOrder: true
}),
]
adjust the order of component
Tslint
If you are worked in a TS project, and your project has tslint, you can easily achieve it by code in below.
module.exports = {
// ...
"ordered-imports": [true, {
"import-sources-order": "case-insensitive",
"named-imports-order": "case-insensitive",
"grouped-imports": true,
"groups": [
{
"name": "react",
"match": "^react.*",
"order": 10
},
{
"name": "internal modules",
"match": "^#",
"order": 30
},
{
"name": "relative dir",
"match": "^[.]",
"order": 40
},
{
"name": "node_modules",
"match": ".*",
"order": 20
}
]
}]
}
Eslint
If you are worked in a js or vue project with eslint, you also can easily achieve it by a eslint plugin: eslint-plugin-simple-import-sort.
the first you need to do is install it.
npm install eslint-plugin-simple-import-sort -D
or
yarn add eslint-plugin-simple-import-sort -D
Then you should add it in your .eslintrc.js file(or other eslint config file)
module.exports = {
// ...
plugins: ["simple-import-sort"],
rules: {
// ...
"simple-import-sort/imports": "error",
}
}
Finally run eslint fix to auto fix import order.
example: npm run lint:fix
Last of the last, you are better to use husky and add npm run lint:fix in husky script, that will let eslint auto to adjust import order before you commit or push(depend you husky config)
I traying setup my vim based typescript developing environment, but have an issue with indent management.
Probably 'eslint' says: indent: Expected indentation of 2 spaces but found 4. after prettier reformat.
My .eslintrc.js:
module.exports = {
parser: '#typescript-eslint/parser', // Specifies the ESLint parser
extends: [
'plugin:react/recommended', // Uses the recommended rules from #eslint-plugin-react
'plugin:#typescript-eslint/recommended', // Uses the recommended rules from #typescript-eslint/eslint-plugin
'prettier/#typescript-eslint',
'plugin:prettier/recommended',
],
parserOptions: {
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
sourceType: 'module', // Allows for the use of imports
ecmaFeatures: {
jsx: true, // Allows for the parsing of JSX
tsx: true, // Allows for the parsing of TSX ???
},
},
rules: {
indent: ['error', 2],
quotes: ['error', 'single'],
semi: ['error', 'never'],
'sort-keys': ['error', 'asc', { caseSensitive: true, natural: false }],
},
}
My .prettierc:
module.exports = {
semi: false,
trailingComma: 'all',
singleQuote: true,
printWidth: 80,
tabWidth: 2,
};
As per this Kai Cataldo's comment on this GitHub issue:
ESLint's indent rule and Prettier's indentation styles do not match - they're completely separate implementations and are two different approaches to solving the same problem ("how do we enforce consistent indentation in a project").
Therefore, when using prettier, you'd better disable eslint's indent rule. It's guaranteed that they will clash.
This should fix it https://github.com/prettier/eslint-config-prettier
It disables rules in eslint that conflict with prettier
in eslintrc add indent: [2, 2, { SwitchCase: 1}]
Parameters defined
new eslint rules want the first parameter to be a number: Severity should be one of the following: 0 = off, 1 = warn, 2 = error.
the amount of indent
The object is stating how to indent switch and case statements following the options here.
Turning off default Visual Studio Code parser and just leaving the eslint parser on save fixed it for me.
Just go to settings Ctrl/Cmd + ,, choose User (global settings) or Workspace (only for the working repo) and on top right corner click the paper with a turning arrow. That will open the declared settings on a json file. With the following settings it should work on any case:
{
// other settings
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.organizeImports": false
},
// other settings
}
Normally at the bottom of the Visual Studio Code window you have a Fix on save: X flag. That should be linked with this setting so make sure to leave it consistent.
I ran into the same issue. Thing is you can just manually override any clashing rules. In my case it was the prettier/prettier plugin for ESLint, so that can be solved adding the indent rule, under the required plugin.
"rules": {
// "indent":["error",10]
"prettier/prettier":[ //or whatever plugin that is causing the clash
"error",
{
"tabWidth":4
}
]
}
You can override specific rules like this, to get rid of any clashes.
Most annoying thing.. so fixed with: eslint-config-prettier
{
"rules": {
"no-tabs": ["error", {"allowIndentationTabs": true}]
}
}
eslint-config-prettier will disable all ESLint formatting rules that may conflict with Prettier's rules.npm i --save-dev eslint-config-prettier
eslint-plugin-prettier is the plugin that will add Prettier's formatting rules.
Let's tell ESLint we'll use Prettier's recommended configuration:
npm i --save-dev eslint-plugin-prettier
//eslintrc.js
{
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest",
"plugin:prettier/recommended"
]
}
It seems on my end, the only conflict is with ternary operations. Another option to fix the issue is to use the following eslint rule.
"indent": ["error", 2, { "offsetTernaryExpressions": true }],
There are a lot more options here: https://eslint.org/docs/latest/rules/indent#offsetternaryexpressions
I find eslint's indent rules more configurable and would use them over prettier.
I had this issue and by changing Prettier to Use Tabs in the settings menu (ctrl + shift + P), it fixed the issue for me.
In my case I just changed CRLF (Carriage Return, Line Feed) to LF (Line Feed) on VSCode
If you are using VS-Code and configured the eslint and prettier settings as per the others answers here, then also check this option in VS-Code ;)
Change it to 'Tab' instead.
In my case what I did was I removed the indentation rule from the .eslintrc file and added useTabs: true to my .prettierrc file.
After reloading the VS Code it works perfectly with the tab size indentation.
So, npm i --save-dev eslint-config-prettier fixed the Issue as pointed out by Akshay
I just realized that there is something better than JSLint and I am having a bit of a hassle with it. I am referring to ESLint.
I am setting it up for VS Code, with the official Plugin by Dirk Baeumer.
So far, everything is running great, until I ran into the indent setting.
I am using a customized auto-beautify setting for my editor and it defaults to 4 spaces/tabs indentation on save.
I am getting 2 errors from ESLint due to integrated code convention types:
[ESLint] Expected indentaion of 2 spaces but found 4. (indent)
and also, for some other case scenarios, I get the following:
[ESLint] Expected indendation of 6 spaces but found 8. (indent)
and so on.. 10 but 12 , 12 but 14... you get the point.
How can I default ALL the indentations troughout my document to be 4 spaces?
My current .eslintrc settings:
{
"extends": [
"eslint:recommended"
],
"root": true,
"rules": {
// '===' instead of '==' rule
"eqeqeq": [2, "allow-null"],
// ^^^ '===' instead of '==' rule
"indent": [2, 4],
"quotes": [2, "single"],
"semi": [2, "always"],
"no-console": 0
},
"env": {
"es6": false,
"browser": true,
"commonjs": true,
"node": false,
"jquery": true
}
}
My "indent": [2, 4], is not working the way I expect it to.
Sample code for reference:
window.setTimeout(function () {
'use strict';
$(document).ready(function () {
var current_width = $(window).width();
if (current_width <= 481) {
$('.widget-form-list').addClass('supv');
$('.widget-form-item').addClass('supv-form-item');
}
})
// window resize
$(window).resize(function () {
var current_width = $(window).width()
if (current_width < 481) {
$('.widget-form-list').addClass('supv')
$('.widget-form-item').addClass('supv-form-item')
}
})
}, 1000)
ESLint configurations are cascading. Meaning that you can have multiple .eslintrc files in different subdirectories and they will be merged at lint time. Your configuration for indent rule looks correct, but based on the error messages you are getting, chances are - it's being overridden by something that sets default number of indentation spaces to 2.
To figure out what is going on, you can use two different commands in ESLint. First, you can run (from command line) ESLint with print-config option. It requires a file to lint, and it will output computed configuration that ESLint will use for this file. Verify that indent is set to [2, 4] in that configuration. If it's not, you can run ESLint with debug flag, which should print out locations of all config files that are being used. That should show you which file overrides your default configuration.
Problem fixed.
The issue was that while configuring the .eslintrc file using the terminal it somehow created another .eslintrc file within my */js/ directory by itself, which contains some default settings which override my */root/ file.
If you are experiencing the same issue - search for a second .eslintrc file within your project folder.
I am getting aמ indentation error that I am having a hard time reasoning. Would really appreciate some help. Here's the stripped down Header.js file where ESlint thinks something is amiss:
import React from 'react';
function Header() {
return <p>Test</p>;
}
module.exports = Header;
ESlint throws an error
4:3 error Expected indentation of 1 tab character but found 0 indent
my .eslintrc file is as follows:
{
"parser": "babel-eslint",
"env": {
"browser": true,
"node": true
},
"extends": "airbnb",
"rules": {
"arrow-body-style": [0],
"comma-dangle": 0,
"indent": [2, "tab", {"SwitchCase": 1}],
"no-console": 0,
"react/prop-types": 0,
"react/jsx-indent-props": [2, "tab"]
}
}
ESLint version is 2.11.1
I am definitely missing something to get this error. But can't figure out what. I have looked into ESlint documentation; but my usage seems correct. I have checked the tab spacing on line 4 too.
Update 1:
The error disappeared when I typed out the same code in vim. I think the error has to do with some sublime settings/plugins that I installed recently.
Update 2:
Figured out the problem.
My sublime settings mentioned
"tab_size": 4,
That is incompatible with my .eslintrc file. I changed the settings to
"tab_size": 2,
and the issue was resolved.
Thanks a lot for all of you who commented