Enable global ESlint config - javascript

I want to make a eslint config works globally, so that I don't need to init it in each project.
then I installed eslint and some config extension globally.
npm install -g eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
And this is my eslint config file ~/.eslintrc.json
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": [
"airbnb-base"
],
"rules": {
}
}
But I got error when I lint my js file
ESLint couldn't find the config "airbnb-base" to extend from. Please check that the name of the config is correct.
The config "airbnb-base" was referenced from the config file in "/home/molly/.eslintrc.json".
This is my global installed packages, airbnb is there.
Did I miss something ? I don't want to install eslint-plugin** in each of project

Probably a bit late for you but I don't think you can install eslint plugins globally.
The way around that worked for me is to create a directory where all my projects go and inside that directory create a package.json (npm init -y) and install all the plugins in that directory npm i -D eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
Bring your global .eslintrc file in that directory which will act like a root eslint config for all your projects that's inside that directory now.
Essentially, your directory tree should like the following now:
projects/
package.json
.eslintrc
node_modules/
...
my_cool_project/
...
my_cool_project2/
...
...

Related

nodemon not watching workspace dependencies

I use nodemon to watch file changes in a TypeScript Node.JS codebase. When a change is detected, esbuild and esbuild-register are used to transpile the code to CommonJS files and the application restarts.
The application is part of a monorepo with yarn workspaces. I use some code from a shared package in my application.
How can i get nodemon to automatically watch dependencies from the same workspace for changes and trigger a restart?
My workaround is adding the relative path to all used linked dependencies in watch in nodemon.json, but that requires me to manually edit the configuration when I add a local linked dependency.
nodemon.json
{
"exec": "node -r esbuild-register",
"ext": "ts,json",
"watch": [
"src",
"../../packages/logger/src",
"../../packages/helpers/src"
],
"ignore": [
"node_modules"
]
}
package.json
{
"dependencies": {
"#app/logger": "*",
"#app/helpers": "*"
}
}

Yarn add creates yarn.lock and node_modules folder inside sub-package in yarn workspace

I am using a yarn workspace, and wonder why yarn creates a yarn.lock and a node_modules folder in the sub-projects when adding dependencies via yarn add ....
As an example, imagine the following simple yarn workspace:
{
"private": true,
"workspaces: [
"./packages/*"
]
}
File structure with sub-project named "subpackage".
Then I add a dependency to the "subpackage" using the following command:
yarn workspace subpackage add lodash
After that, the file folders change as follows:
I wonder why yarn creates the yarn.lock and the node_modules folder when I am in a workspace and even explicitly use the workspace version of the add command. Shouldn't all dependencies be managed through the root workspace directory?
I didn't really find a clear answer to this in the yarn documentation, however this blog-post, which introduced the workspace feature, clearly confirms the expected behaviour:
If you want to modify a dependency of a Workspace, just run the
appropriate command inside the Workspace folder:
$ cd packages/jest-matcher-utils/
$ yarn add left-pad
✨ Done in 1.77s.
$ git status
modified: package.json
modified: ../../yarn.lock
Note that Workspaces don’t have their own yarn.lock files, and the
root yarn.lock contains all the dependencies for all the Workspaces.
When you want to change a dependency inside a Workspace, the root
yarn.lock will be changed as well as the Workspace’s package.json.

Jest doesn't load environment variables (even with --setupFiles dotenv/config)

I'm writing tests for my Express project, but when I run the test script my environment variables are not loaded.
In other threads people suggested using --setupFiles dotenv/config, which I did, but unfortunately it didn't work. I tried both adding it to my test script and to a jest.config.js file, but none worked. Does someone have any hint on how to fix this?
Context
This is how I setup jest on package.json:
"scripts": {
"test": "jest --watchAll --setupFiles dotenv/config"
},
"jest": {
"testEnvironment": "node"
},
At the top of my app.js file, I load my environment variables with
require('dotenv').config();
And this is my folder structure:
Fixed it by moving .env file from the src/ folder to the root folder.
Have a look at this project. It uses both cross-env and dotenv to pass env variables to Express:
cross-env NODE_ENV=production node -r dotenv/config ./build/srv/main.js
Alternatively the sibling project uses cross-env only.
Disclosure: I'm the author of the above 'crisp' projects.

Why is it necessary to install Browserify twice to bundle

I created a new project
I npm install -g browserify
I tested using the cmdline, browserify app.js > bundle.js. Cool.
I want to minify so I npm install uglifyify --save-dev
I tested using the cmdline, browserify -g uglifyify app.js > bundle.js. Great.
Now I want to do this with code, but I get Error: Cannot find module 'browserify'
This is my code, basically to replace the cmdline
var browserify = require('browserify')
var fs = require('fs')
var bundler = browserify('./app.js')
bundler.transform({
global: true
}, 'uglifyify')
bundler.bundle()
.pipe(fs.createWriteStream('./bundle.js'))
It seems I would need to again install browserify locally to this project?
Installing an npm module like browserify allows you to use browserify as a command on the command line. To use the module within your project's code, you must install the module as a dependency. In other words, yes, is must be installed locally within the project's ./node_modules folder and referenced in the package.json file.
From the npm documentation:
Local install (default): puts stuff in ./node_modules of the current package root.
Global install (with -g): puts stuff in /usr/local or wherever node is installed.
Install it locally if you're going to require() it.
Install it globally if you're going to run it on the command line.
If you need both, then install it in both places, or use npm link.
As said in the other answer, one way to solve this is that you can install browserify locally instead of globally, like: npm install --save browserify uglifyfy. Then you can add a script in package.json:
...
"scripts": {
"build": "browserify app.js > bundle.js",
...
},
...
Now, npm run-script build will know how to find local browserify, which is going to be in your node_modules/ directory. And your require('browserify') will work, since browserify is now local.
Another way you could solve this is NODE_PATH env variable. Set this variable in your bashrc or equivalent like this:
export NODE_PATH=$NODE_PATH:$HOME/.nvm/versions/node/v4.2.6/lib/node_modules
Adjust the path to wherever your global node_modules are. Then you can require() whatever you installed with -g flag in your code.
However this is suboptimal, as it can lead to errors and misunderstandings. But if it's for some quick-and-dirty scripts, it can help.

browserify error when using npm dependency that is es6 style [duplicate]

I'm working with Babelify and Browserify. Also, I'm using ES6 style module features by node module system.
I would like to put all my own modules into node_modules/libs.
For instance:
test.js in node_modules/libs
export default () => {
console.log('Hello');
};
main.js (will be compiled to bundle.js)
import test from 'libs/test';
test();
After that, I have compiled the above codes to bundle.js with this command:
browserify -t babelify main.js -o bundle.js
But unfortunately, I have got some error:
export default () => {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
Directory structure:
[test]
`-- node_modules
│ `-- libs
│ `-- test.js
`-- main.js
But, when own modules not in node_modules like this:
[test]
`-- libs
│ `-- test.js
`-- main.js
Then, it works fine. How can I use the ES6 style modules with babelify in node_modules?
That is how Browserify transforms work, transforms only have an effect directly in the module that is being referenced.
If you want a module in node_modules to have a transform, you'd need to add a package.json to that module and add babelify as a transform for that module too. e.g.
"browserify": {
"transform": [
"babelify"
]
},
inside your package.json plus babelify as a dependency will tell browserify to run the babelify transform on any file inside that module.
Having libs be a folder in node_modules is however probably a bad idea. Generally that folder would have true standalone modules in it. I'd generally say that if the folder can't be taken and reused elsewhere, then it shouldn't be in node_modules.
Update
For Babel v6, which was recently released, you will also need to specify which transformations you would like to perform on your code. For that, I would recommend creating a .babelrc file in your root directory to configure Babel.
{
"presets": ["es2015"]
}
and
npm install --save-dev babel-preset-es2015
You can specify source transforms in the package.json in the
browserify.transform field. There is more information about how
source transforms work in package.json on the module-deps
readme.
Source: https://github.com/substack/node-browserify#browserifytransform
Example (my_batman_project/node_modules/test_robin_module/package.json):
"browserify": {
"transform": [
"babelify"
]
},
browserify will read the configuration and perform any given transforms automatically.
I believe this issue is actually related to ESLint.
ESLint 2.0 changed what's required for it to interpret ES6 modules. http://eslint.org/docs/user-guide/migrating-to-2.0.0
You'll need to modify your ecmaFeatures configuration option and replace it with something like:
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module"
},

Categories