I am using spacemacs and flycheck-eslint as linter to check my React code.
Here is my project's .eslintrc,
{
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parser": "babel-eslint",
"env": {
"browser": true,
"es6": true,
"node": true
},
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"semi": [0, "never"],
"eqeqeq": 2,
"no-console": 1,
"no-unused-vars": [1, {"vars": "all", "args": "after-used"}],
"comma-spacing": [2, {"before": false, "after": true}],
"react/prop-types": [2, {
"ignore": ["dispatch"]
}]
},
"globals": {
"__DEV_MODE__": true,
"__API_SERVER__": true
}
}
I have set NO semicolon in the .eslintrc. I've try Atom Editor, Sublime Text3, VSCode, they work as expect.
But in spacemacs, I got the annoying underline hint.
How can I remove the annoying underline ??
Thanks!
After researching, I've found that it is not related to flycheck. The underline is added by js2-mode.
The solution is to add (setq js2-strict-missing-semi-warning nil) in .spacemacs file.
Related
I'm was trying to resolve some cross-platform issues in our linting (in my case a line-ending issue between Windows and IOs platforms).
Line ending problem is resolved (had to do with a files.eol setting) but when I save my file, some linting is getting reverted, like so
below are my workspace and linting config. What is fighting back at me here?
.eslintrc.js
module.exports = {
root: true,
extends: '#react-native-community',
parser: '#typescript-eslint/parser',
plugins: ['#typescript-eslint', 'unused-imports'],
overrides: [
{
files: ['*.ts', '*.tsx', '*.js'],
rules: {
'prettier/prettier': [
'error',
{
endOfLine: 'auto',
},
],
'#typescript-eslint/no-shadow': ['error'],
'no-shadow': 'off',
'no-undef': 'off',
'no-console': 'warn',
'#typescript-eslint/no-unused-vars': 'off',
'react/no-unstable-nested-components': ['warn', {allowAsProps: true}],
'unused-imports/no-unused-imports': 'error',
'unused-imports/no-unused-vars': [
'warn',
{
vars: 'all',
varsIgnorePattern: '^_',
args: 'after-used',
argsIgnorePattern: '^_',
},
],
},
},
],
};
.prettierrc.js
module.exports = {
bracketSpacing: false,
bracketSameLine: true,
singleQuote: true,
trailingComma: "all",
arrowParens: "avoid",
};
myproject.code-workspace
{
"folders": [
{
"path": "."
}
],
"settings": {
"compilerOptions": {
"baseUrl": "",
"paths": {
"lib/*": ["src/lib/*"]
}
},
"editor.formatOnSave": true,
"editor.rulers": [],
"editor.tabSize": 2,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"tailwindCSS.experimental.classRegex": [
"tw`([^`]*)", // tw`...`
"tw=\"([^\"]*)", // <div tw="..." />
"tw={\"([^\"}]*)", // <div tw={"..."} />
"tw\\.\\w+`([^`]*)", // tw.xxx`...`
"tw\\(.*?\\)`([^`]*)" // tw(Component)`...`
],
"eslint.format.enable": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
},
"extensions": {
"recommendations": [
"mikestead.dotenv",
"dsznajder.es7-react-js-snippets",
"eamodio.gitlens",
"dbaeumer.vscode-eslint",
"austenc.tailwind-docs",
"esbenp.prettier-vscode",
"adpyke.codesnap"
]
}
}
Ok problem was the workspace settings editor.formatOnSave and the editor.codeActionsOnSave.
My formatting is handled by the linting so I didn't need the VSCode formatter fighting with the linting.
I am using eslint extension in vscode and it is always showing me the parser error which says that it cannot read tsconfig.json but when I run in the bash the command "eslint --ext .ts ." then it does not show there is any problem but only in the vscode eslint extension it's showing that problem.
Also, I noticed that it is not complaining about missing semicolons.
tsconfig.json
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"resolveJsonModule": true,
"outDir": "./build/",
"esModuleInterop": true,
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"skipLibCheck": true
}
}
.eslintrc
{
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/recommended",
"plugin:#typescript-eslint/recommended-requiring-type-checking"
],
"plugins": [
"#typescript-eslint"
],
"env": {
"browser": true,
"es6": true,
"node": true
},
"rules": {
"#typescript-eslint/semi": [
"error"
],
"#typescript-eslint/explicit-function-return-type": "off",
"#typescript-eslint/explicit-module-boundary-types": "off",
"#typescript-eslint/restrict-template-expressions": "off",
"#typescript-eslint/restrict-plus-operands": "off",
"#typescript-eslint/no-unsafe-member-access": "off",
"#typescript-eslint/no-unused-vars": [
"error",
{
"argsIgnorePattern": "^_"
}
],
"no-case-declarations": "off"
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json"
}
}
I have a eslint config file .eslintrc.json (could be .eslintrc) like this:
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:#typescript-eslint/eslint-recommended",
"airbnb-typescript-prettier"
],
"plugins": [
"#typescript-eslint"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"overrides": [
{
"files": ["*.js", "*.jsx"],
"processor": "babel-eslint"
}
],
"rules": {
"react/prop-types": 0,
"semi": ["error", "never"]
}
}
and I got a persistent error
Error: ESLint configuration of processor in '.eslintrc.json#overrides[0]' is invalid: 'babel-eslint' was not found
Although official eslint site suggest this configuration, you need to use parser property in the overrides instead of processor such as the following:
...
"overrides": [
{
"files": ["*.js", "*.jsx"],
"parser": "babel-eslint"
}
],
...
With this change everything works pretty well.
I'm using VS Code for a React project and have VS Code configured to format on save and to Require a 'prettierconfig' to format (the Prettier: Require Config setting from the VSCode Prettier extension). I also have the ESLint plugin enabled.
That seems to mean my project's .prettierrc config file drives the formatting on save and .eslintrc.json provides linting warnings. But in at least one case (below) some formatting issues are left unresolved on save.
The code below, as formatted, shows eslint(indent) squiggly warnings in VS Code. Upon save (Ctrl + S), some get resolved, but some do not.
Specifically, the incorrect indent spacing of the first <div> gets fixed on save and that eslint(indent) warning disappears. However, the later eslint(indent) warnings do NOT get resolved on save. But they DO, however, get resolved when (on Windows) I click Ctrl +Shift+ P, then find and click the "ESLint: Fix all auto-fixable Problems".
When I save the file again those changes are reverted and the warning appears again.
So "format on save" applies different formatting than "ESLint: Fix all auto-fixable Problems". Is there a way to reconcile these? I would like all the eslint(indent) issues to resolve on save.
Does anyone know what ESLint settings drive "ESLint: Fix all auto-fixable Problems"?
const MyModule = () => {
...
return (
// "eslint(indent)" warning on next line gets resolved on save
<div>
{!menus.find(function(permission) {
return permission.level === 'ADMIN';
}) ? (
// "eslint(indent)" warnings below DO NOT get resolved on save
// ... but they DO get resolved on "ESLint: Fix all auto-fixable problems"
// ... then they reappear on save
<div>
<Redirect to="/" />
</div>
) : (
<div>
<Results />
</div>
)}
</div>
);
};
export default MyModule;
My .eslintrc.json contents:
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"prettier",
"prettier/react"
],
"rules": {
"react/prop-types": 0,
"no-console": 1,
"no-control-regex": 0,
"indent": ["warn", 2],
"quotes": ["warn", "single"],
"space-in-parens": 1,
"prefer-destructuring": 0,
"prefer-const": 0
},
"parser": "babel-eslint",
"plugins": ["react", "import", "jsx-a11y"],
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
My .prettierrc:
{
"useTabs": false,
"printWidth": 120,
"tabWidth": 2,
"singleQuote": true
}
Like the other posted suggested, I use a setup where eslint runs prettier for me. I already had prettier disabled for my js/ts files so I knew that wasn't the issue. It turns out it was the built in formatter for vscode and turning off editor.formatOnSave fixed the issue.
My project's settings.json. This disables the formatter only for typescript files. Eslint will still fix your files as long as you have the eslint auto fix settings enabled.
{
"[typescript]": {
"editor.formatOnSave": false
},
"[typescriptreact]": {
"editor.formatOnSave": false
}
}
Rather than turning off formatOnSave, you could instead set the default formatter to eslint:
{
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescriptreact]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
}
}
Here are the rest of my settings just for reference.
My user settings.json
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"prettier.disableLanguages": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"markdown"
]
}
.eslintrc
{
"root": true,
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"project": "tsconfig.json",
"warnOnUnsupportedTypeScriptVersion": false
},
"plugins": ["#typescript-eslint", "jest", "prettier"],
"extends": [
"plugin:#typescript-eslint/recommended",
"prettier/#typescript-eslint"
],
"rules": {
"prettier/prettier": [
"error",
{
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"trailingComma": "all",
"printWidth": 110
}
]
}
}
Instead of using both prettier and eslint formatters, just use the eslint formatter and add your prettier options inside your eslintrc file. Here's an example
https://prettier.io/docs/en/integrating-with-linters.html
// .eslintrc.json
...
"rules": {
"prettier/prettier": [
1,
{
"useTabs": false,
"printWidth": 120,
"tabWidth": 2,
"singleQuote": true
}
]
}
...
I am using vscode and enabled the auto-format config to format files when saving files.
But i recently found that vscode editor always add a newline at EOF of each js file,so how to disable this?
I have specially added the config "files.insertFinalNewline": false, but it still not worked.
vscode info:
Version: 1.33.1 (system setup)
Commit: 51b0b28134d51361cf996d2f0a1c698247aeabd8
Date: 2019-04-11T08:27:14.102Z
Electron: 3.1.6
Chrome: 66.0.3359.181
Node.js: 10.2.0
V8: 6.6.346.32
OS: Windows_NT x64 6.1.7601
vscode config.json
{
"workbench.colorTheme": "Monokai",
"editor.fontSize": 16,
"editor.formatOnPaste": true,
// Format a file on save.
// A formatter must be available,
// the file must not be auto-saved,
// and editor must not be shutting down.
"editor.formatOnSave": true,
"debug.console.fontSize": 16,
"terminal.integrated.fontSize": 14,
"markdown.preview.fontSize": 14,
"window.zoomLevel": 1,
"editor.renderWhitespace": "all",
"window.title": "${dirty}${activeEditorLong}${separator}${rootName}${separator}${appName}",
"search.exclude": {
"**/.gitignore": true,
"**/.idea": true,
"**/.vscode": true,
"**/build": true,
"**/dist": true,
"**/tmp": true,
"**/yarn.lock": true
},
"workbench.iconTheme": "material-icon-theme",
"editor.wordWrapColumn": 110,
"http.proxyStrictSSL": false,
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": false,
"files.trimFinalNewlines": false,
"html.format.endWithNewline": false,
"javascript.implicitProjectConfig.experimentalDecorators": true,
// Enable/disable default JavaScript formatter (For Prettier)
"javascript.format.enable": false,
// Use 'prettier-eslint' instead of 'prettier'.
// Other settings will only be fallbacks
// in case they could not be inferred from eslint rules.
"prettier.eslintIntegration": true,
"prettier.tabWidth": 4,
"prettier.singleQuote": true,
"prettier.arrowParens": "always"
}
.eslintrc.json
{
"extends": "airbnb",
"plugins": [
"react",
"jsx-a11y",
"import",
"react-hooks"
],
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"legacyDecorators": true,
"experimentalObjectRestSpread": true
}
},
"env": {
"browser": true,
"es6": true
},
"parser": "babel-eslint",
"globals": {
"describe": true,
"it": true,
"inject": true,
"beforeEach": true,
"addProviders": true,
"spyOn": true,
"expect": true,
"global": true,
"require": true,
"async": true,
"ENVIRONMENT": true,
"client": true
},
"rules": {
"linebreak-style": 0,
"quotes": [2, "single", {
"avoidEscape": true,
"allowTemplateLiterals": true
}],
"indent": [2, 4, {
"SwitchCase": 1,
"VariableDeclarator": 1
}],
"react/jsx-indent": [2, 4],
"comma-dangle": ["error", "never"],
"class-methods-use-this": 0,
"import/newline-after-import": 0,
"space-before-function-paren": ["error", "never"],
"func-names": ["error", "never"],
"consistent-return": [0],
"eol-last": ["error", "never"],
"no-script-url": ["off"],
"react/jsx-indent-props": [2, 4],
"react/forbid-prop-types": [2, {
"forbid": []
}],
"jsx-a11y/anchor-is-valid": ["error", {
"components": ["Link"],
"specialLink": ["to"],
"aspects": ["noHref"]
}],
"jsx-a11y/href-no-hash": "off",
"jsx-a11y/no-static-element-interactions": "off",
"jsx-a11y/click-events-have-key-events": "off",
"import/no-unresolved": [
"error",
{
"ignore": ["client/"]
}
],
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": true
}
],
"import/extensions": 0,
"max-len": [
0, 110, 4
],
"react/jsx-filename-extension": [
1,
{
"extensions": [
".js",
".jsx"
]
}
],
"react-hooks/rules-of-hooks": "error"
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".json", ".css"]
}
}
}
}
So, how to config vscode correctly?
I had the same problem. To fix it you need to be in the folder of your project. then open your settings i.e command + shift + p, type settings, select Preferences: open settings UI, under Text Editor tab, choose Files and you'll find Eol tab to choose from \n, \n, auto. I choose auto so it will override whatever you specify.