I am trying to disable the Eslint camelcase rule by setting it to either "off" or 0 in my package.json file. Any idea why it isn't working?
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"#vue/typescript/recommended"
],
"parserOptions": {
"ecmaVersion": 2020
},
"rules": {
"camelcase": "off"
},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"mocha": true
}
}
]
}
You can keep the settings as per your requirement:
"rules": {
"properties": "never",
"ignoreDestructuring": true,
"ignoreImports": false
},
Here is the default setting and description:
"properties": "always" (default) enforces camelcase style for property names
"ignoreDestructuring": false (default) enforces camelcase style for destructured identifiers
"ignoreImports": false (default) enforces camelcase style for ES2015 imports
More info here: https://eslint.org/docs/rules/camelcase
Related
In #vue/cli 4.0.5 app I want to add no-unused-vars errors(both in app and in phpstorm )
and I added this option in .eslintrc.js, which contains:
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
rules: {
'no-console': 'error',
'no-debugger': 'error',
"no-unused-vars": "error",
'no-undef': "error",
},
parserOptions: {
parser: 'babel-eslint'
}
}
But I di not see no-unused-vars errors event I restart yarn server.
Are there some other options ?
Thanks!
I don't know how your configurations are set, but you can always add the eslintConfig on package.json file, like this:
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"rules": {
"no-unused-vars": "error"
}
}
In .vue and .js, I can enjoy the intellisense of vscode when developing.
But I found it doesn't work any more when I use an alias.
So I have searched for a while on blogs, found a solution, which is to configure a 'jsconfig.json' as below.
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"baseUrl": "./",
"paths": {
"#/*": [
"src/*"
]
}
}
}
it worked in the .js file but didn't work in .vue file.
Does anyone know how to resolve it ?
Does work in .js
Not work in .vue
With vue-cli the alias is defined in the webpack-config (since #vue/cli uses webpack under the hood). So instead of jsconfig.json (delete it! just do it!) , I would:
1: Install the webpack resolver for eslint:
npm i eslint-import-resolver-webpack
2: Reference the plugin from your .eslintrc.js
"settings": {
"import/resolver": "webpack"
},
Done!
This is my complete .eslintrc.js just to be thorough:
module.exports = {
"settings": {
"import/resolver": "webpack"
},
parserOptions: {
parser: "babel-eslint"
},
extends: [
"eslint:recommended",
"plugin:vue/recommended"
],
"env": {
"browser": true,
"node": true
},
rules: {}
}
If any issues remains I would check the eslint-settings in vscode settings.json:
"eslint.enable": true,
"eslint.provideLintTask": true,
"eslint.workingDirectories": ["src"],
"eslint.validate": ["javascript","javascriptreact","vue"],
In my pakcage.json , the generated config is
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/standard"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
but then when I write in my vue.confgig.js :
const webpack = require('webpack')
module.exports = {
configureWebpack: {
devtool: ('mode' === 'test') ? 'inline-source-map' : false,
plugins: [
i get an error :
rror: Unexpected constant condition (no-constant-condition) at vue.config.js:5:15:
how should I write the rule in my package.json file ?
You receive this error because you are comparing 2 strings
'mode' === 'test'
this will never be true
you should instead propably be doing
process.env.NODE_ENV === 'test'
I'm trying to write tests for my Office Fabric React, initially started using react-scripts-ts, now ejected since I ran into this issue, and I'm running into the following error when using the withResponsiveMode library:
TypeError: Cannot read property 'large' of undefined
13 | const initialState: IAppState = {
14 | isMenuVisible: true,
> 15 | responsiveMode: ResponsiveMode.large
| ^
16 | };
17 |
18 | // Actions
I'm using the moduleNameMapper setting listed here: https://github.com/OfficeDev/office-ui-fabric-react/wiki/Fabric-6-Release-Notes.
My jest config is below:
module.exports = {
collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
globals: {
"ts-jest": {
tsConfigFile: "C:\\repos\\provider-portal-ui\\tsconfig.test.json"
}
},
moduleFileExtensions: [
"web.ts",
"ts",
"web.tsx",
"tsx",
"web.js",
"js",
"web.jsx",
"jsx",
"json",
"node",
"mjs"
],
moduleNameMapper: {
"^react-native$": "react-native-web",
"office-ui-fabric-react/lib/": "office-ui-fabric-react/lib-commonjs/"
},
setupFiles: ["<rootDir>/config/polyfills.js"],
testEnvironment: "node",
testMatch: [
"<rootDir>/src/**/__tests__/**/*.(j|t)s?(x)",
"<rootDir>/src/**/?(*.)(spec|test).(j|t)s?(x)"
],
testURL: "http://localhost",
transform: {
"^.+\\.css$": "jest-css-modules",
"^.+\\.tsx?$": "ts-jest"
},
transformIgnorePatterns: [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|ts|tsx)$"
]
};
tsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"experimentalDecorators": true
},
"exclude": [
"node_modules",
"build",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"src/setupTests.ts"
]
}
tsconfig.test.json:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "commonjs"
}
}
I'm guessing this is some sort of configuration issue, as this code works fine when not being tested.
Found the answer to this. It seems to be an issue with Typescript & ts-jest and enums.
https://github.com/kulshekhar/ts-jest/issues/281
native and have a problem with configuring eslint.
This is my .eslintrc.js.
module.exports = {
"extends": "airbnb",
"parser": "babel-eslint",
"env": {
"jest": true,
},
"plugins": [
"react",
"node"
],
"rules": {
"no-use-before-define": "off",
"react/jsx-filename-extension": "off",
"node/no-unsupported-features/es-syntax": ["error", {
"version": ">=6.0.0",
"ignores": ["modules", "destructuring"]
}],
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"react/prop-types": "off",
}
};
In App.js,
const { navigation } = this.props;
I got the eslint error.
[eslint] Destructuring are not supported yet on Node 4.0.0. (node/no-unsupported-features)
[eslint] 'navigation' is missing in props validation (react/prop-types)
And also in In App.js,
<View style={styles.container}>
<UpArrow title="cancel" />
<SecondsSpinner seconds={this.state.imageTime} changeImageTime={this.changeImageTime} />
<DownArrow title="save" />
</View>
I got error
[eslint] JSX not allowed in files with extension '.js' (react/jsx-filename-extension)
So I
turned off "react/prop-types",
set "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
set "ignores": ["destructuring"].
But they dosen't work.
I don't know why and how to solve this.
Is there any other file to config eslint?
Thanks in advance.
EDIT1) "ignores": ["modules"] works. so weird.
EDIT2) I am using vscode and got errors on the editor on and on, so I thought because of .eslintrc file.
But now I think it's problem of vscode. I set
"eslint.options": { "configFile": "/Users/com/vscode/AwesomeProject/.eslintrc.js" }
in Workspace Settings then it works
Try:
module.exports = {
"extends": "airbnb",
"parser": "babel-eslint",
"env": {
"jest": true,
},
"plugins": [
"react",
"node"
],
"rules": {
"no-use-before-define": 0,
"react/jsx-filename-extension": 0,
"node/no-unsupported-features/es-syntax": ["error", {
"version": ">=6.0.0",
"ignores": ["modules", "destructuring"]
}],
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"react/prop-types": 0,
}
};