How can I use the Airbnb JavaScript styling guide without using any additional tools? I already installed Tern (Tern IDE) for my Eclipse oxygen. I downloaded the latest release of the eslint-config-airbnb-base-v12.0.1 and selected under
Project -> Properties -> Tern ->Validation -> ESLint the .eslintrc file from the release. My Tern configuration is stored in a .tern-project file:
{
"ecmaVersion": 6,
"plugins": {
"guess-types": {
},
"outline": {
},
"eslint": {
"configFile": "C:\\dev\\workspace\\pyqt_web\\eslint-config-airbnb-base\\.eslintrc"
},
"browser-extension": {
},
"bootstrap": {
}
},
"libs": [
"browser",
"jquery"
]
}
The .eslintrc looks like:
{
"extends": "./index.js",
"rules": {
// disable requiring trailing commas because it might be nice to revert to
// being JSON at some point, and I don't want to make big changes now.
"comma-dangle": 0
},
}
and index.js:
module.exports = {
extends: [
'./rules/best-practices',
'./rules/errors',
'./rules/node',
'./rules/style',
'./rules/variables',
'./rules/es6',
'./rules/imports',
].map(require.resolve),
parserOptions: {
ecmaVersion: 2017,
sourceType: 'module',
ecmaFeatures: {
experimentalObjectRestSpread: true,
},
},
rules: {
strict: 'error',
},
};
From here i dont know how to go further. I would expect, that i get new warning which match these of airbnb style guide. Would this work for js code in html files?
Related
after switching to vscode 1.68.1
every time on saving the file its automatically removing the React from the import
at first i though this could be an eslint issue as i am using eslint for formatting but after removing eslint plugin issue remains the same
here is my settings.json
{
"eslint.alwaysShowStatus": true,
"editor.formatOnSave": true,
"files.eol": "\r\n",
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.organizeImports": true
},
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"prettier.arrowParens": "avoid",
"prettier.embeddedLanguageFormatting": "off",
"prettier.enable": false,
"eslint.format.enable": false,
"[css]": {
"editor.defaultFormatter": "aeschli.vscode-css-formatter"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
}
}
and here is the .eslintrc
module.exports = {
"env": {
"browser": true,
"es6": true
},
"extends": "airbnb",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react", "react-hooks"
],
"rules": {
"linebreak-style": ["error", "windows"],
"react/forbid-prop-types": 0,
"react/prop-types": 0,
"max-len": ["error", { "code": 220 }]
},
"settings": {
"import/resolver": {
"node": {
"moduleDirectory": ["node_modules", "src/"]
}
}
}
};
Try adding these rules in eslintrc:
{
"rules": {
"react/jsx-uses-react": 0,
"react/react-in-jsx-scope": 0
}
}
OR
Try adding "jsx": "react" to your jsconfig:
{
"compilerOptions": {
"baseUrl": ".",
"jsx": "react",
"paths": {
"*": ["*", "src/*"]
}
}
}
This helps VS-Code understand that React is implicitly referenced by the jsx elements in your file.
I had the same problem in multiple projects, after adding these rules, solves the problem for me.
VS Code expects that every project declares a tsconfig.json or jsconfig.json and if none is provided, it defaults it to
{
"compilerOptions": {
"jsx": "react"
}
}
This effectively means that if you have React imports in your code, they will be preserved.
To adopt the latest react 17+ standard with the _jsx transform, the environment type needs to be react-jsx.
{
"compilerOptions": {
"jsx": "react-jsx"
}
}
{
// ...
"rules": {
// ...
"react/jsx-uses-react": "on",
"react/react-in-jsx-scope": "on"
}
}
Add these rules to your eslint config
add type on your tsx file, to prevent removed automatically by vscode
import React from 'react';
type _react = typeof React
.eslint
{
rules: {
'react/jsx-uses-react': 0, // ignore validation must include react scope in jsx/tsx
'react/react-in-jsx-scope': 0, // ignore validation must include react scope in jsx/tsx
'no-unused-vars': 'off', // disable default eslint unused variable
'#typescript-eslint/no-unused-vars': [ // ignore validation variable with prefix _
'warn',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
caughtErrorsIgnorePattern: '^_'
}
]
}
}
I also had the same problem, when removing the extensions I found it was vscode, downgrading to version 1.67.2 solved it
Try removing the "source.organizeImports": true line from your settings, or setting it to false.
I think VS Code thinks the React import is unnecessary because its only used implicitly (which can be a problem if your compiler requires an explicit import to bundle correctly).
When I create a new Nuxt.js project, I've a really exhausting problem with ESLint and Prettier.
If I save on this .vue file, Prettier try to fix it but ESLint prevent it to do this. So, I can't remove errors on this.
My eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
parserOptions: {
parser: 'babel-eslint',
},
extends: [
'#nuxtjs',
'plugin:prettier/recommended',
'plugin:nuxt/recommended',
],
plugins: [],
// add your custom rules here
rules: {},
}
My .prettierrc
{
"semi": false,
"singleQuote": true
}
My settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
"editor.formatOnSave": true,
}
I don't modify ESLint and Prettier files generated.
I suppose the problem come to my VS Code settings, ESLint settings or Prettier. I try some solutions but nothing works.
EDIT
If you have this problem, I advice you to uninstall Visual Studio Code and cache... to reinstall it with fresh install.
I found a solution, not perfect but it works:
VSCode extensions
ESLint on VSCode
Prettier on VSCode
.eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
node: true
},
extends: [
'#nuxtjs',
'plugin:nuxt/recommended',
'eslint:recommended' // <- add this line
// 'plugin:prettier/recommended', <- remove this line
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {},
plugins: [
'prettier'
]
}
settings.json into VS Code
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.probe": [
"javascript",
"javascriptreact",
"vue"
],
"editor.formatOnSave": false,
"editor.codeActionsOnSave": [
"source.formatDocument",
"source.fixAll.eslint"
],
"vetur.validation.template": false,
// ...
}
package.json
{
// ...
"devDependencies": {
"#nuxtjs/eslint-config": "^6.0.0",
"#nuxtjs/eslint-module": "^3.0.2",
"#nuxtjs/tailwindcss": "^4.0.1",
"babel-eslint": "^10.1.0",
"eslint": "^7.28.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-nuxt": "^2.0.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.7.0",
"postcss": "^8.2.8",
"prettier": "^2.2.1"
}
}
Close and open again VS Code to reload rules or reload your window
I think problem come to VS Code settings with some ESLint conflicts with Prettier. It's not THE solution, it's just a solution. If you have any other to offer, I'm really interested.
ESLint rule sometimes confilicts with prettier rule. Try moving 'plugin:prettier/recommended' after 'plugin:nuxt/recommended' in .eslintrc.js to overwrite ESLint rule nuxt provides.
According to eslint-config-prettier's doc:
Then, add "prettier" to the "extends" array in your .eslintrc.* file. Make sure to put it last, so it gets the chance to override other configs.
And eslint-config-prettier is used by eslint-plugin-prettier:
This plugin ships with a plugin:prettier/recommended config that sets up both the plugin and eslint-config-prettier in one go.
Best compatible for Nuxtjs (2022) .eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:vue/essential',
'#nuxtjs',
'plugin:prettier/recommended',
'prettier',
],
parserOptions: {
ecmaVersion: 12,
parser: '#babel/eslint-parser',
sourceType: 'module',
},
plugins: ['vue'],
rules: {
'vue/multi-word-component-names': 'warn',
'no-unused-vars': 'warn',
'space-in-parens': 'off',
'computed-property-spacing': 'off',
'max-len': 'warn',
},
}
This is confusing because I have one project set up with a .eslintrc.js that formats everything fine, but I can't get it to work on another project that is a very similar setup. Here is that file:
I have Prettier set as the formatter, and VSCode set to format on save. But when it formats, it seems to use the rules from the Prettier settings page in VSCode, and not from the eslintrc file. The result is that it formats the code in one way and then throws a linting error because the way it formatted is not following the rules. I know it's gotta be something stupid but I can't figure out how to make it use the ESLint settings to format.
This is eslintrc.js
module.exports = {
env: {
browser: true,
es6: true,
node: true
},
extends: [
"prettier",
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
"plugin:react/recommended"
],
globals: {
Atomics: "readonly",
SharedArrayBuffer: "readonly"
},
parser: "#typescript-eslint/parser",
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 2018,
sourceType: "module"
},
plugins: ["#typescript-eslint", "prettier"],
settings: {
"import/parsers": {
"#typescript-eslint/parser": [".ts", ".tsx"]
},
"import/resolver": {
typescript: {}
}
},
rules: {
"prettier/prettier": ["error"],
"react/jsx-uses-react": 1,
"max-len": [2, { code: 80, comments: 120, tabWidth: 2 }],
"#typescript-eslint/interface-name-prefix": 0,
"#typescript-eslint/no-unused-vars": 0
}
};
Ah okay so the answer here was to implement the right Prettier rules in .prettierrc.
The VSCode Prettier settings can be set specifically for the workspace, which was what caused me confusion (I had trailingComma set to none in another workspace which made me confused about why that workspace was correctly formatting things).
I added this code to .prettierrc, which makes the Prettier formatter consistent with the ESLint rules:
{
"arrowParens": "avoid",
"trailingComma": "none",
"tabWidth": 2,
"semi": true,
"singleQuote": false
}
I (mistakenly?) thought that Prettier automatically derived its formatting options from the ESLint rules.
I would like to remove the #babel/plugin-proposal-class-properties plugin as we are now targeting chrome 79 which supports class properties. I would imagine that removing this plugin shouldn't be a problem because we no longer need babel to transpile that code.
When I remove the plugin from the plugins section of the babelrc file, I am getting an error -
Module build failed (from ./node_modules/babel-loader/lib/index.js), ...
"Support for the experimental syntax 'classProperties' isn't currently enabled "
Relevant Package.json entries:
"#babel/core": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"webpack": "4.40.0",
Here is my .babelrc file
{
"presets": [
"#babel/preset-react",
[
"#babel/preset-env",
{
"targets": {
"chrome": 79
}
}
],
"#babel/preset-typescript"
],
"plugins": [
"babel-plugin-styled-components"
]
}
Here is my webpack config, relevant loader configuration:
{
test: /\.(js(x)?|ts(x)?)$/,
exclude: [/node_modules/],
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
]
},
Any help or insight would be appreciated.
I have a project with both JS and TS files (and JSX/TSX). I have a separate .eslintrc.json file for JS vs. TS. I'd like to be able to tell VSCode which eslint config file to use depending on the file extension.
Tried putting the settings in settings.json under the [typescript] field but that didn't work.
I think it should be possible to use 1 file and overrides option:
.eslintrc.js
module.exports = {
"root": true,
"plugins": ["#typescript-eslint"],
"rules": {
// JavaScript rules
},
"overrides": [
{
"files": ["*.ts", "*.tsx"],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json"
},
"plugins": [
"#typescript-eslint"
],
"rules": {
// TypeScript rules
}
}
]
}
And changing workspace settings:
"eslint.validate": [
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
}
]