I have a javascript project formatted with Prettier and eslint. The issue is that when I save a code like this:
require('dotenv').config({ path: `${ PATH_CFG }/.env` }); process.env.APP_DATABASE = process.env.APP_DATABASE.replace('CREDENTIALS', process.env.CONSUMER_USER);
I get this: the white space in { PATCH_CFG } is removed, the semi-colon is removed, and the breaks with some moving to a new line. I also get an indentation in one of the lines:
require('dotenv').config({ path: `${PATH_CFG}/.env` }) process.env.APP_DATABASE = process.env.APP_DATABASE.replace( 'CREDENTIALS', process.env.COORDINATOR_USER )
Any idea how I can fix this and maintain the original code using prettier & eslint?
you could place the code in a disable block:
/* eslint-disable prettier/prettier */
require('dotenv').config({ path: `${ PATH_CFG }/.env` }); process.env.APP_DATABASE = process.env.APP_DATABASE.replace('CREDENTIALS', process.env.CONSUMER_USER);
/* eslint-enable prettier/prettier */
Related
I try to copy and replace some variable in multiples files. For this, i use esj module replace my vars.
But i don't know if ejs module is correct for my case. I would like just copy "template" initial file and replace variable in file.
My exemple using NodeJS :
const symfonyPluginPath = path.join(
__dirname,
'../plugins/symfony/template'
);
const testPath = path.join(__dirname, '../plugins/test');
shell.rm('-rf', testPath);
shell.mkdir(testPath);
shell.cp('-r', `${symfonyPluginPath}/*`, testPath);
shell.cp('-r', `${symfonyPluginPath}/.*`, testPath);
shell.cd(testPath);
// #ts-ignore
fs.readdir(testPath, (error, files) => {
files.forEach((file) => {
const compiled = ejs.compile(
fs.readFileSync(`${testPath}/${file}`, 'utf8')
);
const test = compiled({ appName: 'test' });
console.log(test);
});
});
This code work for only 1 file, but in forEach i've an error EISDIR: illegal operation on a directory, read.
I don't know if my approch is good and if ejs is the correct module for this.
Anyone can help me ?
Thank you community !
EISDIR stands for "Error, Is Directory". This means that NPM is trying to do something to a file but it is a directory.
Try in this format ---
path.join('x/y/z', '/plugins/test')
I put hours into this and can't really understand what's going on here. I try to concat, minify and create sourcemaps for my css files. I want my folder structure like this:
- Assets
----bundles
--------css
----css
----maps
--------css
I used lots of variations of the following code but can't get it working. For example when I use the following code:
gulp.src("./Assets/css/*.css", { base: "." })
.pipe(sourcemaps.init())
.pipe(concat("./Assets/bundles/css/"))
.pipe(cssmin())
.pipe(gulp.dest("."))
.pipe(sourcemaps.write("./Assets/bundles/maps"))
.pipe(gulp.dest("."));
This creates a folder structure as:
./Assets/bundles/maps/Assets/bundles/css/myFile.css.map
However, when I use
gulp.src("./Assets/css/*.css", { base: "." })
.pipe(sourcemaps.init())
.pipe(concat("./Assets/bundles/css/"))
.pipe(cssmin())
.pipe(gulp.dest("."))
.pipe(sourcemaps.write("./css"))
.pipe(gulp.dest("."));
This outputs to my root project folder like
./css/Assets/bundles/css/myFile.css.map
What's going on here? I tried to use gulp-rename but couldn't make it work too.
Note: Gulp version is 3.9.1
I ended up using it like this
gulp.src("./Assets/css/*.css", { base: "." })
.pipe(sourcemaps.init())
.pipe(concat("./Assets/bundles/css/"))
.pipe(cssmin())
.pipe(gulp.dest("."))
.pipe(sourcemaps.write("./Assets/bundles/maps/css", {
sourceMappingURL: function (file) { //This is to reference the correct paths for our map file..
return "../maps/css/" + path.basename(file.path) + ".map"; //require the path module..
}
}))
.pipe(rename(function (path) {
if (path.extname == ".map") { //Only change the paths of map files not the .min files
path.dirname = "./Assets/bundles/maps/css";
}
}))
.pipe(gulp.dest("."));
I'm trying to use this npm module to both strip some front matter from a markdown file and then give me access to the markdown it stripped. Which brings me to my question (code from module page):
var frontMatter = require('gulp-front-matter');
gulp.task('blog-posts', function() {
gulp.src('./posts/*.md')
.pipe(frontMatter({ // optional configuration
property: 'frontMatter', // property added to file object
remove: true // should we remove front-matter header?
}))
.pipe(…);
});
So there's that comment // property added to the file object. What does that mean? How can I get to the front matter data? Perhaps more accurate, how do I access the 'file' object?
Nevermind. The module is assuming people will use this module which allows access to the file object. I appear to have the answer to my question: gulp-data wants to be the standard way for "attaching data to the file object for other plugins to consume," which is apparently something gulp doesn't have a standard for just now.
Working code:
var gulp = require('gulp');
var markdown = require('gulp-markdown');
var frontMatter = require('gulp-front-matter');
var data = require('gulp-data');
markdown.marked.setOptions({
gfm: false
});
gulp.task('default', function () {
return gulp.src('*.md')
.pipe(frontMatter({
property: 'pig',
remove: true
}))
.pipe(data(function(file) {
console.log(file.pig.layout);
}))
.pipe(markdown({tables: true}))
.pipe(gulp.dest('dist'));
});
gulp.task('jade:prod:DE_EN', function () {
return gulp.src('./views/*.jade')
.pipe(tap(function(file) {
console.log(path.basename(file.path))
}))
.pipe(jade({
locals: {
env: 'production',
texts: texts.EN,
config: texts.EN['config']
}
}))
.pipe(gulp.dest('./public/de/en'));
});
console.log(path.basename(file.path)) returns whichever .jade file is passing through the stream.
I want to know how I can get that variable and pass it into the jade pipe as one of the locals. So that I can use it in Jade at compile time.
Any additional links/references/documentation that explain how piping / streams work would be appreciated.
The only way to get data from one Transform (the thing you pass to pipe()) to the next is to attach it to the vinyl-fs file object that is moving through the stream. The gulp-data plugin let's you do just that:
gulp.task('jade:prod:DE_EN', function () {
return gulp.src('./views/*.jade')
.pipe(data(function(file) {
return {
myBasename: path.basename(file.path),
env: 'production',
texts: texts.EN,
config: texts.EN['config']
};
}))
.pipe(jade())
.pipe(gulp.dest('./public/de/en'));
});
Now you can access the myBasename local in your Jade template:
doctype html
html(lang="en")
head
title=Test
body
h1 #{myBasename}
I saw the way to suppress this with jsLint, tried it, it did not work.
I need the 'new' keyword or my script does notwork.
How can I suppress it in .eslintrc?
Many Thanks
Update: Per Jordan's request.
[Please note my app is written in ReactJs]
// 3rd party
const AnimateSlideShow = require('../js-animation');
export default class Animate extends React.Component {
.......
fetchJsAnimation() {
const animation = this.refs.Animation;
new AnimateSlideShow(animation);
}
......
}
Error: Do not use 'new' for side effects no-new
Now, if I satisfy EsLint, my app craps out:
Uncaught (in promise) TypeError: Cannot set property '_handleMouse' of undefined(…)
Here's the documentation for the ESLint rule in question: http://eslint.org/docs/rules/no-new.html
Disallow new For Side Effects (no-new)
The goal of using new with a constructor is typically to create an object of a particular type and store that object in a variable, such as:
var person = new Person();
It's less common to use new and not store the result, such as:
new Person();
In this case, the created object is thrown away because its reference isn't stored anywhere, and in many cases, this means that the constructor should be replaced with a function that doesn't require new to be used.
I pasted that above because I think it's important to understand what the intent of the rule is, and not just how to make it go away.
If you can't find a way to get rid of new, you can suppress this error with the eslint-disable directive:
fetchJsAnimation() {
/* eslint-disable no-new */
const animation = this.refs.Animation;
new AnimateSlideShow(animation);
}
ESLint directives are block-scoped, so it will be suppressed inside this function only. You can also suppress rules on a single line with the eslint-disable-line directive:
new AnimateSlideShow(animation); // eslint-disable-line no-new
// You can disable the check on the next line as well.
// eslint-disable-next-line no-new
new AnimateSlideShow(animation);
If you really need to disable this rule for your entire project, then in your .eslintrc's "rules" section set the value for this rule to 0:
{
// ...
"rules": {
"no-new": 0,
// ...
}
}
You can also make it a warning instead of an error by setting it to 1 (2 is error).
Try to cover your function into an anonim function
(()=>code)();
in your example
fetchJsAnimation() {
const animation = this.refs.Animation;
(()=>new AnimateSlideShow(animation))();
}
Or you can use this pattern for example modern javascript framework eg. vuejs vue
Here is an example
(() => new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
}))();
Extending on sarkiroka answer, here's an ES5 version (essentially an IIFE with a return statement):
(function (Vue) {
'use strict';
return new Vue({
el: '.unity-header-wrapper'
});
}(Vue));
We're avoiding ESLint unused var error, which appears if used this way:
var myApp = new Vue({
el: '.unity-header-wrapper'
});
We're also avoiding using standalone 'new Vue()' instantiation (which prevents side effects error on ESLint)
var myApp = new Vue({
el: '.unity-header-wrapper'
});
You can also add Vue as a global in ESLint config, to avoid undefined global var error, as seen here: Global variables in Javascript and ESLint
// .eslintrc.json
"globals": {
"Vue": true
}
I use a more declarative form using an init() method inside my class. For example:
class Example {
constructor () { ... }
init () { //this method is using for initialize the instance }
}
So, when you initialize that instance:
const example = new Example()
example.init()
And with this you can avoid the "no new" linter and avoid undefined global without linter comments.