I'm building an app with vue-cli, using airbnb rules to lint.
Despite me adding a rule to my .eslintrc.js config file, and the rule appying on other files, this particular variable in my Welcome.vue file keeps throwing a warning when linting.
The warning:
warning: Identifier 'tables_count' is not in camel case (camelcase) at src\components\Welcome.vue:49:33:
47 | enableAll: function enableAll() {
48 | const tables_count = this.tables.length;
49 | for (let i = 0; i < tables_count; i += 1) {
| ^
50 | this.tables[i].enabled = true;
51 | }
52 | },
The full .eslintrc.js file:
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/essential',
'#vue/airbnb',
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
indent: ['error', 4],
camelcase: ['warn', { properties: 'never' }],
},
parserOptions: {
parser: 'babel-eslint',
},
};
The strucure of my app is as follows:
App.vue
Welcome.vue
Game.vue
Both App.vue and Game.vue have variables with an under score and the linting is not throwing warnings for them.
App.vue: this.show_welcome = true;
Game.vue: this.current_answer = '';
What have I done wrong to make one particular Vue file offend the linter so much?!
This is either when I run npm run serve or npm run lint
NOTE: I thought I'd worked it out, but still no...
Currently I only have unit tests for welcome.vue, which has it's own lint file, but I've added the rule in there and I'm still getting the warnings:
tests/unit/eslintrc.js
module.exports = {
env: {
jest: true,
},
rules: {
camelcase: ['warn', { properties: 'never' }],
},
};
For a typescript project:
.eslintrc.js
{
rules: {
'#typescript-eslint/camelcase': 'off'
}
}
If you don't want eslint to check for variable casing then just turn it off with camelcase: 'off' in your .eslintrc.js.
Related
I recently tried to upgrade my node version as nodev10 stopped support,
I had vue-template-babel-compiler installed to support optional chaining for the templates but after doing a fresh npm install, somehow I started getting Server compilation errors.
Below is my package.json
{
"name":"test",
"version":"1.0.0",
"description":"test",
"author":"",
"private":true,
"scripts":{
"dev":"nuxt",
"build":"nuxt build",
"start":"nuxt start",
"generate":"nuxt generate",
"lint":"eslint - ext .js,.vue - ignore-path .gitignore .",
"lint:fix":"eslint - fix - ext .js,.vue - ignore-path .gitignore .",
"lint:css":"stylelint - fix ./**/.{vue,scss,css}"
},
"lint-staged":{
".{js,vue}":"npm run lint:fix",
"*.{css,vue}":"npm run lint:css"
},
"husky":{
"hooks":{
"pre-commit":"lint-staged"
}
},
"dependencies":{
"#nuxtjs/axios":"5.12.2",
"#nuxtjs/dotenv":"2.4.0",
"#nuxtjs/proxy":"2.0.1",
"#nuxtjs/pwa":"3.0.0–0",
"#nuxtjs/vuetify":"1.11.3",
"axios":"0.21.0",
"bootstrap-vue":"2.21.2",
"cookie-universal-nuxt":"2.1.4",
"cross-env":"5.2.1",
"jsonwebtoken":"8.5.1",
"lodash":"4.17.20",
"moment":"2.29.1",
"nuxt":"2.0.0",
"vuex-persist":"3.1.3"
},
"devDependencies":{
"#nuxtjs/eslint-config":"2.0.0",
"#nuxtjs/eslint-module":"1.0.0",
"#nuxtjs/stylelint-module":"3.1.0",
"babel-eslint":"10.0.1",
"eslint":"6.1.0",
"eslint-plugin-nuxt":">=0.4.2",
"eslint-plugin-vue":"6.2.2",
"lint-staged":"10.0.0",
"node-sass":"6.0.1",
"sass-loader":"10.3.1",
"stylelint":"10.1.0",
"stylelint-config-standard":"20.0.0",
"vue-template-babel-compiler":"2.0.0"
},
"config":{
"nuxt":{
"host":"0.0.0.0"
}
},
"engines":{
"node":"16.x"
}
}
and my nuxt.cofig.js
build: {
loaders: {
vue: {
compiler: require('vue-template-babel-compiler')
}
},
vendor: ['axios'],
/*
** You can extend webpack config here
*/
extend(config, ctx) {
}
}
error:
Module parse failed: Unexpected token (1827:43) File was processed with these loaders: * ./node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | }; | } else { > if (data.add?.val === null)
Note:I tried below npm package which only fix JS code optional chaining but not working for template
{
build: {
babel: {
plugins: [
'#babel/plugin-proposal-optional-chaining'
]
}
}
}
Looking for a solution to fix the issue with nuxt2 with nodev16 for both template and JS code.
In my Angular project, I want to extend #commitlint/config-conventional with some pre-defined scopes.
The Angular project has a library for UI components (generated via ng generate library) and a default app which consumes the UI library.
In commitlint.config.js I've added the following lines:
module.exports = {
extends: ['#commitlint/config-conventional'],
rules: {
'scope-enum': [
2,
'always',
[
'ui-components',
'ui-components/badge',
'ui-components/button',
'ui-components/tooltip',
'core',
'account',
'plugins',
'settings',
'projects',
'shared',
'styles'
]
]
}
};
However, when I try to commit something with the scope: 'ui-components/tooltip':
fix(ui-components/tooltip): fix border
I get a commitlint error, saying that:
⧗ input: fix(ui-components/tooltip): fix border
✖ scope must be one of [ui-components, ui-components/badge, ui/button, ui-components/tooltip, core, account, plugins, settings, projects, shared, styles] [scope-enum]
✖ found 1 problems, 0 warnings
Unfortunately slashes aren't allowed in scopes.
To get around this I replace / with two dashes (--).
I wrote a script to grab subfolders and return an array:
https://gist.github.com/trevor-coleman/51f1730044e14081faaff098618aba36
[
'ui-components',
'ui-components--badge',
'ui-components--button',
'ui-components--tooltip',
...
]
According to source code, Commitlint use / for multiple scopes.
It means, you can commit like fix(core/account): fix border but you can't commit fix(ui-components/tooltip): fix border because you need to add tooltip in to your scopes first.
Here is source code: https://github.com/conventional-changelog/commitlint/blob/master/%40commitlint/rules/src/scope-enum.ts
Also, it is mentioned in here: https://github.com/conventional-changelog/commitlint/blob/master/docs/concepts-commit-conventions.md#multiple-scopes
You can write your own custom plugin to check scopes, I had the same issue, so I wrote one to solve this problem, see example commitlint.config.js below:
module.exports = {
extends: ["#commitlint/config-conventional"],
rules: {
"enhanced-scope-enum": [
2,
"always",
[
"ui-components",
"ui-components/badge",
"ui-components/button",
"ui-components/tooltip",
"core",
"account",
"plugins",
"settings",
"projects",
"shared",
"styles",
],
],
},
plugins: [
{
rules: {
"enhanced-scope-enum": (parsed, when = "always", value = []) => {
if (!parsed.scope) {
return [true, ""];
}
// only use comma sign as seperator
const scopeSegments = parsed.scope.split(",");
const check = (value, enums) => {
if (value === undefined) {
return false;
}
if (!Array.isArray(enums)) {
return false;
}
return enums.indexOf(value) > -1;
};
const negated = when === "never";
const result =
value.length === 0 ||
scopeSegments.every((scope) => check(scope, value));
return [
negated ? !result : result,
`scope must ${negated ? `not` : null} be one of [${value.join(
", "
)}]`,
];
},
},
},
],
}
I am using solhint plugin for linting solidity code. But I want to add custom rules for the code analysis. How to add custom rules as part of the ruleset ?
Code added for custom rule:
const BaseChecker = require('./../base-checker')
const ruleId = 'no-foos'
const meta = {
type: 'naming',
docs: {
description: `Don't use Foo for Contract name`,
category: 'Style Guide Rules'
},
isDefault: false,
recommended: true,
defaultSetup: 'warn',
schema: null
}
class NoFoosAllowed extends BaseChecker {
constructor(reporter) {
super(reporter, ruleId, meta)
}
ContractDefinition(ctx) {
const { name } = ctx
if (name === 'Foo') {
this.reporter.error(ctx, this.ruleId, 'Contracts cannot be named "Foo"')
}
}
}
module.exports = NoFoosAllowed
I have saved the above code into a new js file inside rules->naming folder. And i have used the 'no-foos' rule id inside my .solhint.json file inside the rules property.
{
"extends": "solhint:all",
"plugins": [],
"rules": {
"avoid-suicide": "error",
"avoid-sha3": "warn",
"no-foos" : "warn",
"var-name-mixedcase": "error"
}
}
Each ruleset loops through all rules and enables (or doesn't enable) it based on the rule metadata and the ruleset config.
So you can create a custom rule in the rules folder and set it a combination of metadata that your ruleset will enable.
In for example Swift/iOS development, it's possible to differentiate builds for different environments with "flags" such as:
#if STAGING
// one set of logic here
#endif
#if PRODUCTION
// another set of logic here
#endif
Is it possible to achieve the same with a Vue.js project, and how would we go about doing it? I am aware of makes different routes conditionally available for different roles (which is also quite neat), but I am optimally looking for the option to differentiate on a source code level.
Hope someone has some great insights! It could include:
How to exclude parts of a file (such as the #if STAGING above) from a build target
How to exclude entire files from a build target
etc.
you have the ability to use this syntax
if(process.env.NODE_ENV === 'production') {
console.log("this is the prod env!!!!!!!!!!");
config.output.path = path.resolve(__dirname, "dist");
}
make sure that when you run the script with the correct env's for each environment (local, dev, staging, prod etc ..) :D
just change the vue-loader output.
the source code
<template v-if="process.env.NODE_ENV === 'development'">
development only
</template>
default output
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c(
"div",
{ attrs: { id: "app" } },
[
_vm.process.env.NODE_ENV === "development"
? [_vm._v(" development only ")]
: _vm._e(),
_c("router-view")
],
2
)
}
just use regex to replace _vm.process.env. by process.env is ok.
// webpack.config.js
module: {
rules: [{
// must set post
enforce: 'post',
test: /\.vue$/,
use: [{
loader: './myLoader'
}]
}]
}
// myLoader.js
module.exports = function (source, map) {
if (source.indexOf('_vm.process.env') > -1) {
source = source.replace(/_vm.process.env/g, 'process.env')
}
this.callback(
null,
source,
map
)
}
Final the vue-loader result change
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c(
"div",
{ attrs: { id: "app" } },
[
// change to true
true
? [_vm._v(" development only ")]
: undefined,
_c("router-view")
],
2
)
}
I have the following in my .eslintrc:
'key-spacing': [ 'error', {
'singleLine': {
'beforeColon' : false,
'afterColon' : true
},
'multiLine': {
'beforeColon' : false,
'afterColon' : true,
'align' : 'colon'
}
}]
The goal being to make sure in an object assignment that the following is true:
in a single line assignment, there is no space before each colon,
but there is one after.
in a multi-line assignment, the colons line up horizontally, and
there is a space both before and after each colon.
the strange thing is that the following three code snippets:
1 [ from my app.vue file ].
export default {
name : 'app',
components : {
todos
}
}
2 [ from my main.js file ].
new Vue({
el : '#app',
render : h => h( App )
})
3 [ from my Hello.spec.js file ].
const vm = new Vue({
el : document.createElement( 'div' ),
render : h => h( Hello )
})
are each throwing errors on the key-spacing eslint rule:
/Users/autoboxer/development/learning-vue/src/app.vue
12:3 error Missing space after key 'name' key-spacing
/Users/autoboxer/development/learning-vue/src/main.js
6:2 error Missing space after key 'el' key-spacing
/Users/autoboxer/development/learning-vue/test/unit/specs/Hello.spec.js
7:4 error Missing space after key 'el' key-spacing
I can't figure out from my settings why they would be causing the errors listed as there are the requisite spaces after each specified word, but any help would be appreciated.
Configuration for this rule is really complex. I think what you are looking for is something like this:
'key-spacing': [ 'error', {
'singleLine': {
'beforeColon' : false,
'afterColon' : true
},
"align": {
"beforeColon" : true,
"afterColon" : true,
"on" : "colon"
}
}]
However, even with this configuration, ESLint doesn't allow for arbitrary location for colons. They have to be as close as possible to the longest key name in the object. So with the above configuration your code has to change to:
export default {
name : 'app',
components : {
todos
}
}
That will lint correctly with configuration I provided.