I have a a package.json file, created one with npm init.
But I failed to install everything needed by the config:
npx install-peerdeps --dev eslint-config-wesbos. What am I doing wrong? Thank you.
I installed :
npm i jslint
jslint#0.12.1 updated 1 package and audited 6594 packages in 5.791s found 53 vulnerabilities (15 low, 16 moderate, 22 high)
I have made some configurations :
./node_modules/.bin/jslint --init
then :
./node_modul.es/.bin/jslint gulpfile.js --fix
I have got suggestions but it is not fixing it.
If you do not have permissions to install globally, and you use npm version 5.2+, you can use npx.
It downloads the package and executes it locally.
Usage:
npx jslint --init
JSlint doesn't seem to have a --fix option, so your second command wouldn't work anyway. Consider using eslint which has auto fix feature
There's two ways of installing npm packages.
Locally and globally.
You've installed the package locally but are trying to run a global command.
To install the package globally you could run the following command
npm i -g jslint
Alternatively, since you don't have global permissions you could install it locally and add an npm script to the package.json file in your project:
"scripts": {
"lint": "jslint gulpfile.js"
}
And run it with
npm run lint
I started a react project using create-react-app few months ago and I'm interesting in migrating the project from Javascript to Typescript.
I saw that there is a way to create react app with typescript using the flag:
--scripts-version=react-scripts-ts
But I didn't find any explanation how can I migrate an existing JS project to TS.
I need it to be done incrementally so I can work with both .js and .ts files so I can do the transformation over time.
Does anyone has any experience with this migration? What are the required steps that should be done to make this work?
UPDATE: create-react-app version 2.1.0 support typescript so for those of you who are starting from scratch you can use it to create new application with typescript, and according to the documentation it should be done with the following command:
$ npx create-react-app my-app --typescript
For existing projects, after updating to version 2.1.0, add the following packages to your project's dependencies with the following command:
$ npm install --save typescript #types/node #types/react #types/react-dom #types/jest
and then you can simply rename .js to .ts files.
I found a solution to migrate create-react-app from javascript to typescript, this way doesn't require eject.
Create a temporary react project with typescript by running the command create-react-app --scripts-version=react-scripts-ts
(Note - requires create-react-app to be installed globally)
In your own project - under package.json file remove the react-scripts
Add react-scripts-ts to your project by running the command yarn add react-scripts-ts or if your are using npm then npm install react-scripts-ts. Or, add "react-scripts-ts": "2.8.0" to package.json.
From the project you created in step 1 copy the files: tsconfig.json, tsconfig.test.json tslint.json to your own project
Under your own project, in package.json, under scripts section, change react-scripts instances to react-scripts-ts (should be under start, build, test and eject
Install the typings for react by installing the following modules using yarn or npm: #types/node, #types/react and #types/react-dom. Put in devDependencies section if using package.json.
Change index.js file name to index.tsx
In your tsconfig.json file add the following configuration: "allowSyntheticDefaultImports": true - for more info
NOTE step 7 might require additional modification depends on what you have in your index.js file (if it depends on JS modules in the project).
Now you can run your project and it might work, for those of you who are getting error that contains You may need an appropriate loader to handle this file type regarding .js files, it happens because babel doesn't know how to load .js file from .tsx files. What we need to do is to change the project configuration. The way I found doing it without running eject is using react-app-rewired package. This package lets you configure external configuration which will be added/override the default project settings. What we'll do is using babel to load these type of files. Let's moved on:
Install the package react-app-rewired using yarn or npm
In your root folder (where package.json is located) create a new file with the name config-overrides.js
Put this code in config-overrides file:
var paths = require('react-scripts-ts/config/paths')
module.exports = function override(config) {
config.module.rules.push({
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
cacheDirectory: true,
},
})
return config
}
Edit package.json so the start/start-js, build, test, and eject scripts use react-app-rewired as shown in the project readme. E.g. "test": "react-app-rewired test --scripts-version react-scripts-ts --env=jsdom".
Now you can start you the project and the problem should be solved. You might need additional modifications depending on your project (additional types and so).
Hope it helps
As suggested here in the comments, it's possible to define: "compilerOptions": { "allowJs": true} in your tsconfig.json file, so you can mix JS and TS without react-app-rewired. Thanks for mention this!
Create React App v2.1.0 was released today with TypeScript support today. That means you no longer need to eject or use the react-scripts-ts fork; all you need to do if you have an existing Create React App project is install the required packages:
$ npm install --save typescript #types/node #types/react #types/react-dom #types/jest
$ # or
$ yarn add typescript #types/node #types/react #types/react-dom #types/jest
You can then simply rename .js files to .ts files to start using TypeScript.
(If you have an existing app using the create-react-app-typescript fork, here's a tutorial on how to port it to regular Create React App.)
You will need to eject a configuration in order to do that.
After ejecting you need to perform the following steps:
Add typescript extensions tsx and ts to the extensions table
in the webpack configs (dev and prod).
Add ts-loader. Here is an example
{
test: /\.(ts|tsx)$/,
include: paths.appSrc,
use: [
{
loader: require.resolve('ts-loader'),
},
],
},
Change eslint to tslint
Add source-map-loader to get a possibility to debug Typescript files.
{
test: /\.js$/,
loader: require.resolve('source-map-loader'),
enforce: 'pre',
include: paths.appSrc,
}
Create a Typescript config file and remember to set allowJs to
true.
1). run
npm install --save typescript #types/node #types/react #types/react-dom #types/jest
or
yarn add typescript #types/node #types/react #types/react-dom #types/jest
2). Add the tsconfig.json
run npx tsc --init
3). Add this to the tsconfig
"compilerOptions": {
"jsx": "react-jsx", // this line
Now you can integrate tsx into an existing project 😊
1). run
npm install --save typescript #types/node #types/react #types/react-dom #types/jest
or
yarn add typescript #types/node #types/react #types/react-dom #types/jest
2). Rename any file to be a TypeScript file (e.g. src/index.js to src/index.tsx)
3). run npm i #types/react-dom #types/react-redux #types/react-router-dom
4). Restart your development server!
enjoy :)
I want to update multiple npm dependecies and save them to the respective package.json dependency slot.
My package.json:
{
"dependencies": {
"gulp": "^3.0.0"
},
"devDependencies": {
"gulp-eslint": "^2.8.0"
}
}
So i want to run:
$ npm update gulp gulp-eslint
That's ok but how to save the newer versions both for gulp (dep) and gulp-eslint (devDep) respectively ?
I tried:
$ npm update gulp gulp-eslint --save
but gulp-eslint is devDependency actually must be saved there, how to do all this in 1 command line?
You can check the official documentation for npm-update and notice that there are different specifications according to the npm version you are using.
From the command line you can do:
$ npm update --save --dev
Note: Use sudo if your are on Linux or Mac.
You can also use Yarn, which is a new package manager, with this command:
yarn upgrade
https://yarnpkg.com/en/docs/cli/upgrade
I just installed ESLint and created a package.json for my project (which is an meteor project).
npm install -g eslint
Now I would like to test all my *.js-files in my project folder. How do I do that?
I tried to do
cd project
eslint -c package.json *.js
But nothing is happening.
At the end I want to do a test, if all files are ok, so I can do a merge / deploy or what so ever.
eslint app-directory/
The -c lets you define a config file, though the package.json won't serve as a valid eslint config.
This is a example eslint conifg: https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/es6.js
You just can create a .eslintrc file from where you execute your eslint command and it will use it as a default config (without you specifying it via -c)