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"
}
}
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"
}
}
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
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?
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'