I'm working on a React.js application and I'm trying to lint my code. I use ESLint with the Airbnb style, but I have these errors:
../src/Test.jsx
4:2 error Unexpected tab character no-tabs
5:2 error Unexpected tab character no-tabs
5:3 error Expected indentation of 2 space characters but found 0 react/jsx-indent
6:2 error Unexpected tab character no-tabs
Here my code:
Test.jsx:
import React from 'react';
function Test() {
return (
<h1>Test</h1>
);
}
export default Test;
.eslintrc:
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": "airbnb",
"parser": "babel-eslint",
"rules": {
"indent": [2, "tab", { "SwitchCase": 1, "VariableDeclarator": 1 }],
"react/prop-types": 0,
"react/jsx-indent-props": [2, "tab"],
}
}
As you can see above, I would like to indent with tab.
webpack.config.js:
loaders: [{
test: /\.jsx$|\.js$/,
loaders: ["babel-loader", "eslint-loader"],
exclude: /node_modules/
},
...
]
I also tried to indent why 2 spaces, without success. I really don't understand why I have theses errors. Do you have an idea?
Thanks!
As #mark-willian told me, I added some lines in my .eslintrc and it works:
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": "airbnb",
"parser": "babel-eslint",
"rules": {
"indent": [2, "tab", { "SwitchCase": 1, "VariableDeclarator": 1 }],
"no-tabs": 0,
"react/prop-types": 0,
"react/jsx-indent": [2, "tab"],
"react/jsx-indent-props": [2, "tab"],
}
}
Thank you for all of your answers.
The airbnb rules want you to use spaces instead of tabs for formatting your code. Good editors (sublime is one!) will let you use tabs but translate them to spaces when saving your code.
You need to change the config of your sublime; go to Preferences-Settings and customize the following settings:
"tab_size": 2,
"translate_tabs_to_spaces": true
Sublime will convert your existing code - click on the text in the status bar at the bottom right that says tabs or spaces.
You can selectively turn off eslint rules if (for example) one of airbnb's rules doesn't match your coding style guide.
Try replace every tab to spaces.
It is also a good idea to enable the ESLint autofix feature with this eslint-loader option in your webpack configuration.
You can add this comment on page which you get no-tabs error.
/* eslint-disable */
Related
I'm trying to make an IDE that works in the browser using the Monaco editor. I wanted to use Prettier for a nice formatting. It only works for Javascript files or only html files. However, it does not work on files of the types I have specified below. How can I fix.
Expected :
Result :
Also i am getting this error :
monaco.languages.registerDocumentFormattingEditProvider("javascript", {
async provideDocumentFormattingEdits(model) {
alert(1);
var text1 = prettier.format(model.getValue(), {
wrapAttributes: "force",
parser: "babel",
// plugins: [babel],
htmlWhitespaceSensitivity: "ignore",
arrowParens: "always",
bracketSpacing: true,
endOfLine: "lf",
insertPragma: false,
singleAttributePerLine: false,
bracketSameLine: false,
printWidth: 400,
proseWrap: "preserve",
quoteProps: "as-needed",
requirePragma: false,
semi: true,
singleQuote: true,
tabWidth: 4,
//trailingComma: 'es5',
useTabs: false,
vueIndentScriptAndStyle: false,
});
return [
{
range: model.getFullModelRange(),
text: text1,
},
];
},
});
monaco_scr_editor = monaco.editor.create(document.getElementById("browserIDE"), {
value: ["<html>Please Wait Loading</html>"].join("\n"),
language: "javascript",
theme: "vs-dark",
wrappingColumn: 0,
autoIndent: true,
formatOnPaste: true,
formatOnType: true,
wrappingIndent: "indent",
wordWrap: "off",
automaticLayout: true,
overviewRulerLanes: 1,
overviewRulerBorder: true,
minimap: { enabled: false },
});
You need to provide right value for options.parser.
From docs
options.parser must be set according to the language you are formatting (see the list of available parsers). Alternatively, options.filepath can be specified for Prettier to infer the parser from the file extension.
so set it to parser: "html".
It seems like designed to use pre-defined formatter.
Please refer this issue : Disable default formatters.
I tested code as below(from a thread),
monaco.languages.html.htmlDefaults.setModeConfiguration({
...monaco.languages.html.htmlDefaults.modeConfiguration,
documentFormattingEdits: false,
documentRangeFormattingEdits: false,
});
This will work for you.
But you still get error relate with prettier.
Refer this issue : https://github.com/prettier/prettier/issues/6264
Before doing this, install this to make easy import parser list from node_module.
npm install #types/prettier
and then import it.
import * as prettier from 'prettier/standalone'
import * as parserHtml from 'prettier/parser-html'
...
prettier.format(model.getValue(), {
...
parser: "html",
plugins: [parserHtml],
...
I'm trying to sort props names alphabetically using the plugin eslint-plugin-react but I'm getting this error:
[Error ] .eslintrc.json: Configuration for rule "react/jsx-sort-props" is invalid: Value {"callbacksLast":true,"shorthandFirst":false,"shorthandLast":true,"multiline":"last","ignoreCase":true,"noSortAlphabetically":false} should NOT have additional properties.
This is my .eslintrc.json file:
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"next/core-web-vitals"
],
"rules": {
"react/jsx-sort-props": [
"2",
{
"callbacksLast": true,
"shorthandFirst": false,
"shorthandLast": true,
"multiline": "last",
"ignoreCase": true,
"noSortAlphabetically": false
}
]
}
}
What I'm missing?
There are two issues:
The severity option, if you're using a number, should be a number, not a string that contains a number - 2, not "2". (Though, personally, I'd suggest using "error" instead - it makes it clearer from reading the config what the rule means for your project - "error" makes more intuitive sense than 2)
There is a bug in the linter rule's jsx-sort-props.js - although the docs reference a multiline property, said property does not exist anywhere in the lint rule implementation, and so an error is thrown when you pass in an object containing that property. Remove it.
"rules": {
"react/jsx-sort-props": [
2,
{
"callbacksLast": true,
"shorthandFirst": false,
"shorthandLast": true,
"ignoreCase": true,
"noSortAlphabetically": false
}
]
}
I want to specify string lengths for HTML and JS in one config file .prettierrc.
module.exports = {
singleQuote: true,
printWidth: 80,
[HTML]: {
printWidth: 150,
},
};
But in log i got:
ReferenceError: HTML is not defined
You should be using the .prettierrc format instead, visual studio code will also provide intellisense when you use this format.
You are getting the error because:
The file needs to be in the JSON format,
Any overrides need to be specified under the overrides JSON key
In your case the file should look like this:
.prettierrc
{
"singleQuote": true,
"printWidth": 80,
"overrides": [
{
"files": ["**/*.html"],
"options": {
"printWidth": 150
}
}
]
}
I am using postcss-purgecss plugin to remove unused css file.I am facing one issue my one class is not preserve in bundle why ?
here is my configuration file
{
"plugins": [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
"autoprefixer": {
"flexbox": "no-2009"
},
"stage": 3,
"features": {
"custom-properties": false
}
}
],
[
"#fullhuman/postcss-purgecss",
{
"content": [
"./pages/**/*.{js,jsx,ts,tsx}",
"./src/pages/**/*.{js,jsx,ts,tsx}",
"./components/**/*.{js,jsx,ts,tsx}",
"./src/components/**/*.{js,jsx,ts,tsx}",
"./src/core/components/**/*.{js,jsx,ts,tsx}"
],
"safelist": [
"body",
"html",
".f20 [class^='icn-']:before,.f20 [class*=' icn-']"
]
}
]
]
}
why this class is not preserved ".f20 [class^='icn-']:before,.f20 [class*=' icn-']" it should be present in bundle.
Steps to follow to check build
Close the terminal and run npm run build.
It create .next folder inside this there is static folder inside there is css folder where you check the output
https://repl.it/#naveennsit/HorribleNumbAtom
any update ?
I'm having trouble disabling dot-notation in eslint. Below is my eslint config (for the toy example):
module.exports = {
"env": {
"browser": true
},
"extends": "eslint:recommended",
"rules": {
"indent": [
"error",
4
],
"dot-notation": 0,
"no-console": 0,
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
]
}
};
And here is my javascript:
var x = { a: 3 };
console.log("x[a] = " + x["a"]);
According to this, 0 is the way to turn off this eslint option. What am I doing wrong?
Setting a rule value to 0 turns the rule off completely. This means that ESLint will not complain if you try to use an indexer rather than dot notation. It sounds like you're expecting the rule to either throw a warning or error which means that you need either a value of 1 (or warn) or 2 (or error) depending on how you want ESLint to behave.
The "Configuring Rules" section of "Configuring ESLint" should make it a little more clear:
https://eslint.org/docs/user-guide/configuring#configuring-rules