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(
", "
)}]`,
];
},
},
},
],
}
Related
I'm using vue-template-compiler to transform a text in the vue template to an expression
I have this vueJs file
<template>
<p>hi</p>
</template>
I'm trying to change the text with expression like this
<p>{{fun('hi')}}</p>
my code
const compiled = compiler.compile(
data,
{
modules: [
{
transformNode(data) {
const children = data.children.map((child) => {
if (child.type === 3 && child.text.trim()) {
return ({
type: 2,
expression: "_s(fun('hi'))",
tokens: [
{
'#binding': "fun('hi')"
}
],
text: "{{fun('hi)}}"
})
}
return child;
});
return { ...data, children };
},
},
],
},
{
whitespace: "condense",
}
);
it maps over the texts and replace it with the expression.
and it returns the final ast.
but I need to convert it back to string
like that:
<p>{{fun('hi')}}</p>
I need to convert the final ast back to the template
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've set up a website in VuePress and I found that it supports markdown-it's :::danger, :::tip, :::info etc to generate custom containers.
I was wondering if this could be extended in a way, to use for example :::card or :::example or whatever you want.
I found https://github.com/posva/markdown-it-custom-block, but can't find out how to implement it.
This is what've got in my config.js
markdown: {
// options for markdown-it-anchor
anchor: { permalink: false },
// options for markdown-it-toc
toc: { includeLevel: [1, 2] },
extendMarkdown: md => {
md.use(require("markdown-it-container"), "card", {
validate: function(params) {
return params.trim().match(/^card\s+(.*)$/);
},
render: function(tokens, idx) {
var m = tokens[idx].info.trim().match(/^card\s+(.*)$/);
if (tokens[idx].nesting === 1) {
// opening tag
return (
"<card><summary>" + md.utils.escapeHtml(m[1]) + "</summary>\n"
);
} else {
// closing tag
return "</card>\n";
}
}
});
}
}
Any advice is much appreciated!
The script you have will work with ::: card, in order to get it to work change
extendMarkdown: md => {...
to
config: md => {...
This took me a while to figure out. It's a version conflict - that's why it's currently not working.
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.