I'm creating a custom linting rule in lesshint.
I want to access the filename of the file being walked.
Current code:
module.exports = {
name: 'customrule',
nodeTypes: ['decl'],
lint: function(config, node) {
console.log(node.root().source.input.from);
}
};
The closest I've got is node.root().source.input.from which seems to output the index of the file, but not its name.
config object seems to be a boolean
Lead maintainer of lesshint here.
I've just pushed an update where the full file path will be included on all nodes. You can access it via the source property, like this:
module.exports = {
name: 'customrule',
nodeTypes: ['decl'],
lint: function(config, node) {
console.log(node.source.input.file)
}
};
The value of config will be the value you specified for it in your .lesshintrc file. For example:
{
"customrule": {
"enabled": true,
"option": false
}
}
Will pass that object in config.
Link to the newly released version: https://github.com/lesshint/lesshint/releases/tag/v4.6.2
Related
I'm trying to use a service worker in my Vue.js project. I have it functioning with a very basic worker that I just dropped into my public/ directory (example below), but this doesn't allow me to load dependencies using require(), which is what I'd like to do next.
self.addEventListener('install', event => {
self.skipWaiting();
console.log(self)
});
self.addEventListener('fetch', function(event) {
const url = new URL(event.request.url);
console.log(url)
})
I found service-worker-loader, but it presents me with this during compilation: Syntax Error: TypeError: Cannot read property 'unlink' of null. The error persists even when I provide a serviceWorker.js file that is completely blank. My vue.config.js has the loader configured:
module.exports = {
configureWebpack: {
module: {
rules: [
{ test: /serviceWorker\.js$/, use: { loader: "service-worker-loader" }}
]
}
}
}
And I'm referencing my worker using import registerServiceWorker from 'service-worker-loader!./serviceWorker';.
Am I missing something basic? What's the "standard" way to include custom service worker code into a Vue.js project?
So i have the nuxt.config.js file in the project root directory with what follows:
{
modules: [
'#nuxtjs/axios',
'#nuxtjs/proxy'
],
axios: {
proxy: true,
},
proxy: {
'http://localhost:8080/api/v1': 'http://localhost:3000/api/v1'
}
}
I've been struggling to understand why my calls were not proxed (the endpoint remains the same) and then i noticed that even if i break the syntax (removing commas or parenthesys or whatever) and restart the server, my app does not even care.
Can anyone help me make things work?
#nuxtjs/proxy already included
#nuxtjs/axios already includes #nuxtjs/proxy, so you don't need to install it separately; and you don't need to add it to modules array:
{
modules: [
'#nuxtjs/axios',
//'#nuxtjs/proxy', // DON'T DO THIS
]
}
Proxy URL incorrect
Currently, you have it setup to append the original URL to the target, as shown in this example:
http://localhost:8080/api/v1/foo --> http://localhost:3000/api/v1/api/v1/foo
^^^^^^^^^^^ ^^^^^^^^^^^
The config should look like this:
{
proxy: {
'http://localhost:8080/api/v1': 'http://localhost:3030'
}
}
Be careful of duplicate axios configs
If you used create-nuxt-app, nuxt.config.js already includes an empty axios config, which could be easily missed. If you inserted your own config at the top of the config object, it would be overwritten by the empty axios config that had been automatically inserted at the bottom of the object (which effectively disables the proxy):
// nuxt.config.js
module.exports = {
// your config
axios: {
proxy: true
},
//...
// was automatically inserted; overwrites your config above
axios: {}
}
My app used to work fine until I updated VueJS this morning. Now when I build, it shows the following error:
Error: Conflict: Multiple assets emit to the same filename img/default-contractor-logo.0346290f.svg
There's only one file like this in the repo.
Here's my vue.config.js:
module.exports = {
baseUrl: '/my/',
outputDir: 'dist/my',
css: {
loaderOptions: {
sass: {
data: `
#import "#/scss/_variables.scss";
#import "#/scss/_mixins.scss";
#import "#/scss/_fonts.scss";
`
}
}
},
devServer: {
disableHostCheck: true
}
};
I tried webpack fixes recommended in similar cases, but non helped.
I had the same error when importing SVG files using dynamically generated path in the require statement:
const url = require("../assets/svg/#{value}");
<img src={{url}} />
In this case file-loader processes all SVG files and saves them to the output path. My file-loader options were:
{
loader: "file-loader",
options: { name: "[name].[ext]" }
}
The folders structure has duplicate file names, something like this:
assets
|__ one
|____ file.svg
|__ two
|____ file.svg
In this case file-loader saves both file.svg files to the same output file: build/assets/file.svg - hence the warning.
I managed to fix it by adding [path] to the name option:
{
loader: "file-loader",
options: { name: "[path][name].[ext]" }
}
The answer by #ischenkodv is definitely correct, but because of my inexperience with webpack, I needed a little more context to use the information to fix the problem.
For the benefit of anyone else in the same situation, I'm adding the following details which I hope will be useful.
This section of the Vue.js documentation was particularly helpul:
VueJS - Modifying Options of a Loader
For the TL;DR fix, here is the relevant chunk of my vue.config.js:
// vue.config.js
module.exports = {
// ---snip---
chainWebpack: config =>
{
config.module
.rule('svg')
.test(/\.svg$/)
.use('file-loader')
.tap(options =>
{
return { name: "[path][name].[ext]" };
});
}
// ---snip---
};
In my project it was the flag-icon-css NPM package that was causing the Multiple assets emit to the same filename conflict errors. The above update to the vue.config.js file resolved the problem for me.
I suspect that the regular expression in the test could be tightened up to target just the items in the flag-icon-css package rather than matching all SVG files, but I haven't bothered since it's not causing any adverse effects so far.
I created a project using #vue/cli 3 and attempted to add the autoOpenBrowser option and received the following error. So, I gather that this option is no longer available?
ERROR WebpackDevServerOptionsValidationError: Invalid configuration object. webpack-dev-server has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property 'autoOpenBrowser'. These properties are valid:
object { hot?, hotOnly?, lazy?, bonjour?, host?, allowedHosts?, filename?, publicPath?, port?, socket?, watchOptions?, headers?, logLevel?, clientLogLevel?, overlay?, progress?, key?, cert?, ca?, pfx?, pfxPassphrase?, requestCert?, inline?, disableHostCheck?, public?, https?, contentBase?, watchContentBase?, open?, useLocalIp?, openPage?, features?, compress?, proxy?, historyApiFallback?, staticOptions?, setup?, before?, after?, stats?, reporter?, logTime?, noInfo?, quiet?, serverSideRender?, index?, log?, warn? }
module.exports = {
devServer: {
port: 4020,
autoOpenBrowser: true
}
}
Create vue.config.js file at root level and add your code in this file. Running the command npm run serve will automatically open your application in browser.
module.exports = {
devServer: {
port: 8080,
open: true
}
}
Duh, it was the open option... I was confusing the config/index.js file with webpack.config.js.
module.exports = {
devServer: {
port: 4020,
open: true
}
}
I want to add the -p flag in order to generate documentation for private methods using grunt-jsdoc. How can I do that?
According to the documentation at grunt-jsdoc they state that we can use any of the options specified in the useJsDocCli, however do not know how they should be specified in the grunt task. Here is my current grunt task:
jsdoc : {
dist : {
src: ['app/scripts/directives/*.js','README.md'],
options: {
destination: 'doc'
}
}
}
How can I specify that I want the task to run with the -p flag (or any other flags)?
There's an example in the documentation under the template section https://github.com/krampstudio/grunt-jsdoc#templates
Just use the flag name without the dash, for example:
dist : {
src: ['app/scripts/directives/*.js','README.md'],
options: {
destination: 'doc',
private: true
}
}
}