I'm using this .eslintrc setup generated by the eslint --init command.
It offers me to chose the airbnb styleguide which is a good start to me
module.exports = {
env: {
browser: true,
es6: true,
},
rules: {
"react/state-in-constructor": [0, "never"],
"arrow-parens": 0
},
extends: [
'airbnb',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: [
'react',
],
rules: {
"react/state-in-constructor": [0, "never"],
"arrow-parens": 0
},
};
However, afterwards, it seems like it is enforcing some rules that i don't want for now which are :
rules: {
"react/state-in-constructor": [0, "never"],
"arrow-parens": 0
},
But it is not taken in account by VSCode or Eslint command.
Someone faced this issue ?
Best regards,
Louis
Related
I have set a react-native project with the cli. It works, but I have a very anoying eslint error:
Strings must use singlequote.eslint(quotes)
I have tried to write this:
module.exports = {
root: true,
extends: "#react-native-community",
rules: {
avoidEscape: true,
allowTemplateLiterals: true,
},
};
I also tried to create my own config:
module.exports = {
globals: {
Atomics: "readonly",
SharedArrayBuffer: "readonly",
},
parser: "#typescript-eslint/parser",
extends: ["#react-native-community"],
parserOptions: {
ecmaVersion: 2018,
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
},
plugins: ["react", "react-hooks"],
rules: {
avoidEscape: true,
allowTemplateLiterals: true,
},
settings: {
react: {
version: "detect",
},
},
"sort-imports": [
"error",
{
ignoreCase: false,
ignoreDeclarationSort: false,
ignoreMemberSort: false,
memberSyntaxSortOrder: ["none", "all", "multiple", "single"],
},
],
};
Nothing works. How to remove this rule?
You can turn off any specific rule like so:
{
"rules": {
"quotes": "off"
}
}
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"
}
}
Prettier VS Code extension doesn't work properly with .vue. I mean how to setup prettier to integrate it with eslint and format .vue files on Cmd+Shift+P -> Format Document. .eslintrc.js:
module.exports = {
root: true,
env: {
browser: true,
},
extends: [
'plugin:vue/essential',
'standard'
],
plugins: [
'vue'
]
}
You need to define those rules in your .eslintrc.js file like this:
module.exports = {
root: true,
env: {
node: true
},
extends: ["plugin:vue/essential", "#vue/prettier"],
rules: {
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"prettier/prettier": [
"warn",
{
"singleQuote": true,
"semi": false,
"trailingComma": "none"
}
]
},
parserOptions: {
parser: "babel-eslint"
}
};
Easier is to install vetur octref.vetur extension and then add a .vscode>settings.json with following
{
"editor.defaultFormatter": "octref.vetur",
"vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.postcss": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.ts": "prettier"
}
you can add .prettierrc.json file in the root directory, and
{
"singleQuote": true,
"tabWidth": 2,
"semi": false
}
./.prettierr.js (file in root folder, that is)
module.exports = {
//your rules here
trailingComma: 'none',
tabWidth: 2,
singleQuote: true,
semi: false
}
I'm trying to run my VueJS + Nuxt app on IE and get the following error:
'Unable to get property 'call' of undefined or null reference'
This happens in the following line:
modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
when moduleID = "./node_modules/webpack-hot-middleware/client.js?name=client&reload=true&timeout=30000&path=/__webpack_hmr"
I think it has something to do with the way I configure my presets when using Nuxt.
This is currently how nuxt.config.js build part looks like:
build: {
vendor: ['vuetify', 'babel-polyfill', 'vued3tree', 'vue2-editor','lodash'],
extractCSS: true,
babel: {
presets: [
['es2015'],
[
'vue-app',
{
useBuiltIns: true,
targets: { ie: 11, uglify: true },
},
],
],
},
How do I need to configure my presets in order for my app to run on IE?
solved that as well by removing a library called vue2-hammer. Now I have one issue in Chrome and in IE: 'regeneratorRuntime is not defined'. tried every solution in Google and no solution. Now my Nuxt.config.js looks like this:
const polyfill = require('#babel/polyfill');
module.exports = {
entry: [polyfill],
build: {
extractCSS: true,
extend(config, ctx) {
if (ctx.isDev && ctx.isClient) {
config.module.rules.push(
{
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/,
},
{
test: /\.js$/,
loader: 'babel-loader',
options: {
plugins: [
[
'#babel/plugin-transform-runtime',
{
corejs: false,
helpers: true,
regenerator: true,
useESModules: false,
},
],
[
'#babel/plugin-transform-regenerator',
{
asyncGenerators: false,
generators: false,
async: false,
},
],
'babel-plugin-transform-es2015-shorthand-properties',
'#babel/plugin-transform-exponentiation-operator',
'#babel/plugin-syntax-dynamic-import',
'#babel/plugin-transform-arrow-functions',
],
},
},
);
}
},
},
babel: {
presets: [
[
'es2015',
'stage-0',
],
],
exclude: ['transform-regenerator'],
},
Ant idea what can cause this?
I am trying to use Karma, Jasmine, JSPM, and Babel all together. It seems I am getting an error I am not sure how to trace:
12 04 2016 19:59:04.407:ERROR [preprocessor.babel]: [BABEL] /Users/allen/work/twentytwenty.qualboard/src/TwentyTwenty.QualBoard.Web/wwwroot/config.js: Unknown option: base.preset. Check out http://babeljs.io/docs/usage/options/ for more info
It barks about config.js and the option base.preset. I am not sure why thought I have done a complete project search for base.preset and cannot find its existence.
Karma Config:
module.exports = function(config) {
config.set({
autoWatch: false,
babelPreprocessor: {
options: {
preset: ['es2015'],
sourceMap: 'inline',
},
},
basePath: '',
browsers: [
'PhantomJS',
],
colors: true,
concurrency: Infinity,
coverageReporter: {
type: 'html',
dir: 'converage/',
},
exclude: [],
files: [],
frameworks: [
'jspm',
'jasmine',
],
jspm: {
config: './wwwroot/config.js',
packages: './wwwroot/jspm_packages',
loadFiles: [
'test/**/*.js',
],
serveFiles: [
'test/**/*.js',
],
},
logLevel: config.LOG_INFO,
plugins: [
'karma-babel-preprocessor',
'karma-coverage',
'karma-jasmine',
'karma-jspm',
'karma-phantomjs-launcher',
'karma-spec-reporter',
],
port: 9876,
preprocessors: {
'./wwwroot/config.js': ['babel'],
'./wwwroot/aurelia/**/*.js': ['babel'],
'./wwwroot/test/**/*.js': ['babel', 'coverage'],
},
proxies: {
'/wwwroot/': '/TwentyTwenty.Qualboard.Web/wwwroot/',
'/jspm_packages/': '/wwwroot/jspm_packages',
},
reporters: [
'coverage',
'spec',
],
singleRun: true,
specReporter: {
maxLogLines: 1,
suppressErrorSummary: true,
suppressFailed: false,
suppressPassed: false,
supressSkipped: false,
},
});
};
My BabelRc:
{
"presets": ["es2015"]
}
I am starting Karma in the terminal by doing:
karma start
What am I missing?
You have a typo, it is presets and not preset:
babelPreprocessor: {
options: {
presets: ['es2015'],
sourceMap: 'inline',
},
}