Related
Our project in company uses .js files and eslint is used for formatting. now we are transforming our app slowly to use .ts and .tsx files so I enabled prettier formatting in .ts and .tsx files only but before we use prettier we configured special rules for typescript files in eslint as following :
overrides: [
// Match TypeScript Files
// =================================
{
files: ['**/*.{ts,tsx}'],
// Parser Settings
// =================================
// allow ESLint to understand TypeScript syntax
// https://github.com/iamturns/eslint-config-airbnb-typescript/blob/master/lib/shared.js#L10
parser: '#typescript-eslint/parser',
parserOptions: {
project: './tsconfig.json',
},
// Extend Other Configs
// =================================
extends: [
'airbnb',
'plugin:#typescript-eslint/recommended',
'plugin:import/typescript',
],
rules: {
...rules,
'react/jsx-uses-react': 'off',
'react/react-in-jsx-scope': 'off',
'#typescript-eslint/space-before-blocks': 'error',
'#typescript-eslint/no-unused-vars': 'error',
'#typescript-eslint/explicit-function-return-type': 'error',
'#typescript-eslint/no-unsafe-return': 'warn',
'#typescript-eslint/padding-line-between-statements': [
'error',
{
blankLine: 'always',
prev: ['interface', 'type'],
next: '*',
},
],
'#typescript-eslint/member-delimiter-style': [
'error',
{
multiline: {
delimiter: 'none',
requireLast: false,
},
singleline: {
delimiter: 'comma',
requireLast: false,
},
},
],
'#typescript-eslint/type-annotation-spacing': 'error',
},
and in .prettierrc file I did the following :
{
"semi": true,
"singleQuote": true,
"printWidth": 100,
"arrowParens": "always",
"tabWidth": 2,
"trailingComma": "es5",
"bracketSameLine": false,
"bracketSpacing": true
}
so prettier for example adds semicolon at end of each line while this rule in .eslint
'#typescript-eslint/member-delimiter-style': [
'error',
{
multiline: {
delimiter: 'none',
requireLast: false,
},
singleline: {
delimiter: 'comma',
requireLast: false,
},
},
doesn't require the line to end with semicolon when declaring types and interface and many other rules conflicts also in eslint when adding multilpe empty lines in file it should show error so how I can do that with prettier?
You may need to change your default formatter for vscode to eslint. You can install the eslint extension and prettier Eslint.
If you are on mac this can be achieved by going to:
Code -> Preferences -> Settings -> Search for Default formatter -> change it to Eslint (dbaeumer.vscode-eslint).
You may also need to change your default formatter. You can achieve this by right-clicking in your screen -> Click on format document with.. -> configure default formatter
The context is pretty big project built with ReactJs, based on eslint rules, with this eslint configuration
const DONT_WARN_CI = process.env.NODE_ENV === 'production' ? 0 : 1
module.exports = {
extends: [
'eslint:recommended',
'plugin:jsx-a11y/recommended',
'plugin:react/recommended',
'prettier',
'prettier/#typescript-eslint'
],
plugins: [
'react',
'html',
'json',
'prettier',
'import',
'jsx-a11y',
'jest',
'#typescript-eslint',
'cypress'
],
settings: {
'html/indent': '0',
es6: true,
react: {
version: '16.5'
},
propWrapperFunctions: ['forbidExtraProps'],
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx']
},
alias: {
extensions: ['.js', '.jsx', '.json']
}
}
},
env: {
browser: true,
node: true,
es6: true,
jest: true,
'cypress/globals': true
},
globals: {
React: true,
google: true,
mount: true,
mountWithRouter: true,
shallow: true,
shallowWithRouter: true,
context: true,
expect: true,
jsdom: true
},
parser: '#typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'es2020',
ecmaFeatures: {
globalReturn: true,
jsx: true
},
lib: ['ES2020']
},
rules: {
'arrow-parens': ['error', 'as-needed'],
'comma-dangle': ['error', 'never'],
eqeqeq: ['error', 'smart'],
'import/first': 0,
'import/named': 'error',
'import/no-deprecated': process.env.NODE_ENV === 'production' ? 0 : 1,
'import/no-unresolved': ['error', { commonjs: true }],
'jsx-a11y/alt-text': DONT_WARN_CI,
'jsx-a11y/anchor-has-content': DONT_WARN_CI,
'jsx-a11y/anchor-is-valid': DONT_WARN_CI,
'jsx-a11y/click-events-have-key-events': DONT_WARN_CI,
'jsx-a11y/heading-has-content': DONT_WARN_CI,
'jsx-a11y/iframe-has-title': DONT_WARN_CI,
'jsx-a11y/label-has-associated-control': [
'error',
{
controlComponents: ['select']
}
],
'jsx-a11y/label-has-for': [
'error',
{
required: {
some: ['nesting', 'id']
}
}
],
'jsx-a11y/media-has-caption': DONT_WARN_CI,
'jsx-a11y/mouse-events-have-key-events': DONT_WARN_CI,
'jsx-a11y/no-autofocus': DONT_WARN_CI,
'jsx-a11y/no-onchange': 0,
'jsx-a11y/no-noninteractive-element-interactions': DONT_WARN_CI,
'jsx-a11y/no-static-element-interactions': DONT_WARN_CI,
'jsx-a11y/no-noninteractive-tabindex': DONT_WARN_CI,
'jsx-a11y/tabindex-no-positive': DONT_WARN_CI,
'no-console': 'warn',
'no-debugger': 'warn',
'no-mixed-operators': 0,
'no-redeclare': 'off',
'no-restricted-globals': [
'error',
'addEventListener',
'blur',
'close',
'closed',
'confirm',
'defaultStatus',
'defaultstatus',
'event',
'external',
'find',
'focus',
'frameElement',
'frames',
'history',
'innerHeight',
'innerWidth',
'length',
'localStorage',
'location',
'locationbar',
'menubar',
'moveBy',
'moveTo',
'name',
'onblur',
'onerror',
'onfocus',
'onload',
'onresize',
'onunload',
'open',
'opener',
'opera',
'outerHeight',
'outerWidth',
'pageXOffset',
'pageYOffset',
'parent',
'print',
'removeEventListener',
'resizeBy',
'resizeTo',
'screen',
'screenLeft',
'screenTop',
'screenX',
'screenY',
'scroll',
'scrollbars',
'scrollBy',
'scrollTo',
'scrollX',
'scrollY',
'self',
'status',
'statusbar',
'stop',
'toolbar',
'top'
],
'no-restricted-modules': ['error', 'chai'],
'no-unused-vars': [
'error',
{
varsIgnorePattern: '^_',
argsIgnorePattern: '^_'
}
],
'no-var': 'error',
'one-var': ['error', { initialized: 'never' }],
'prefer-const': [
'error',
{
destructuring: 'any'
}
],
'prettier/prettier': 'error',
'react/jsx-curly-brace-presence': [
'error',
{ children: 'ignore', props: 'never' }
],
'react/jsx-no-bind': [
'error',
{
allowArrowFunctions: true
}
],
'react/jsx-no-literals': 1,
'react/jsx-no-target-blank': DONT_WARN_CI,
'react/jsx-no-undef': ['error', { allowGlobals: true }],
'react/no-deprecated': DONT_WARN_CI,
'react/prop-types': 0,
'require-await': 'error',
'space-before-function-paren': 0
},
overrides: [
{
files: ['**/*.ts', '**/*.tsx'],
rules: {
'no-unused-vars': 'off',
'import/no-unresolved': 'off'
}
}
]
}
Since the upgrade of the library "#typescript-eslint/parser": "^4.0.0" from "#typescript-eslint/parser": "^3.10.1" this following command ...
eslint --fix --ext .js,.jsx,.json,.ts,.tsx . && stylelint --fix '**/*.scss'
... brings these following errors
9:45 error 'ScrollBehavior' is not defined no-undef
224:12 error 'KeyboardEventInit' is not defined no-undef
53:5 error 'JSX' is not defined no-undef
I know I could fix them adding to the prop globals also the keys JSX: true or KeyboardEventInit: true but it is not the way I want to go.
Any ideas of what is going on here? Where is the configuration error?
Thanks a lot
I had the same issue when trying to declare variables as of type JSX.Element in typescript. I added "JSX":"readonly" to globals in .eslintrc.json and the problem was gone. In your case it would be:
globals: {
React: true,
google: true,
mount: true,
mountWithRouter: true,
shallow: true,
shallowWithRouter: true,
context: true,
expect: true,
jsdom: true,
JSX: true,
},
From the following link, I got that you actually use several options after JSX. You could use true,false, writable or readonly (but not off).
https://eslint.org/docs/user-guide/configuring
Official answer is here and it says indeed to add them to globals or to disable the no-undef rule because TypeScript already has already its own checks:
I get errors from the no-undef rule about global variables not being defined, even though there are no TypeScript errors
The no-undef lint rule does not use TypeScript to determine the
global variables that exist - instead, it relies upon ESLint's
configuration.
We strongly recommend that you do not use the no-undef lint rule on
TypeScript projects. The checks it provides are already provided by
TypeScript without the need for configuration - TypeScript just does
this significantly better.
As of our v4.0.0 release, this also applies to types. If you use
global types from a 3rd party package (i.e. anything from an #types
package), then you will have to configure ESLint appropriately to
define these global types. For example; the JSX namespace from
#types/react is a global 3rd party type that you must define in your
ESLint config.
Note, that for a mixed project including JavaScript and TypeScript,
the no-undef rule (like any role) can be turned off for TypeScript
files alone by adding an overrides section to .eslintrc.json:
"overrides": [
{
"files": ["*.ts"],
"rules": {
"no-undef": "off"
}
}
]
If you choose to leave on the ESLint no-undef lint rule, you can
manually define the set of allowed globals in your ESLint
config,
and/or you can use one of the pre-defined environment (env)
configurations.
From the typescript-eslint troubleshooting guide:
We strongly recommend that you do not use the no-undef lint rule on TypeScript projects. The checks it provides are already provided by TypeScript without the need for configuration - TypeScript just does this significantly better.
In your .eslintrc.js, turn the rule off for TypeScript files using overrides:
module.exports = {
root: true,
extends: '#react-native-community',
parser: '#typescript-eslint/parser',
plugins: ['#typescript-eslint'],
rules: {
'no-shadow': 'off',
'#typescript-eslint/no-shadow': ['error'],
},
overrides: [
{
files: ['*.ts', '*.tsx'],
rules: {
'no-undef': 'off',
},
},
],
};
I have two projects specified in the jest section of my package.json.
"jest": {
"projects": ["<rootDir>/jest.unit.config.js", "<rootDir>/tests/jest.component.config.js"]
}
Whenever I run jest on the command line it only picks up and finds the jest.component.config.js.
I have tried removing jest.component.config.js from the projects list and running jest and it does successfully run the unit test config in that case.
What's the trick to it finding and running both?
//jest.unit.config.js
const jestConfig = require('/common/jest.config');
module.exports = Object.assign(jestConfig, {
displayName: {
color: 'cyan',
name: 'unit-tests'
},
coverageThreshold: {
global: {
branches: 20,
functions: 20,
lines: 20,
statements: 20,
}
}
});
//jest.component.config.js
const jestConfig = require('common/jest.config');
module.exports = Object.assign(jestConfig, {
rootDir: '.',
displayName: {
color: 'yellow',
name: 'component-tests',
},
testMatch: ['./**/*test.ts'],
testEnvironment: './helpers/test-environment.js',
});
//common jest.config.js
module.exports = {
collectCoverage: true,
collectCoverageFrom: [
"src/**/*.{js,jsx,ts,tsx,mjs}",
],
coverageDirectory: "<rootDir>/coverage",
coverageProvider: 'babel',
coverageReporters: ['text', 'html'],
coverageThreshold: {
global: {
branches: 50,
functions: 50,
lines: 50,
statements: 50,
},
},
moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'mjs', 'json'],
modulePathIgnorePatterns: [],
prettierPath: "prettier",
testEnvironment: 'node',
testMatch: ['**/__tests__/**/*.(js|ts|jsx|tsx|mjs)'],
testPathIgnorePatterns: ['/node_modules/', '/fixtures/', '/__tests__/helpers/', '__mocks__', 'dist', '.yalc'],
transform: {
'^.+\\.(ts|tsx)$': 'ts-jest',
'^.+\\\\.(js|jsx|mjs)$': 'babel-jest',
},
transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|ts|jsx|tsx|mjs)$'],
};
Turns out I was overwriting my common jest config with the Object.assign(..) and thus stopping whichever project was first in the list of projects.
To fix this, I was able to make a deep copy of it before using the assign instead.
const commonJest = require('common/jest.config');
const commonJestCopy = Object.assign({}, commonJest)
module.exports = Object.assign(commonJestCopy, {
//...overrides
}
I am having issues getting karma-browserify to work with karma-coverage. I have spent a lot of time trying to figure out what is wrong, but I didn't find a solution.
Here is my .js file (the functions don't do anything; they are just mocks to test code coverage):
// src/js/utilities/form-validation.js
let includedInTest = () => true;
let alsoIncludedInTest = () => true;
let notIncludedInTest = () => true;
let alsoNotIncludedInTest = () => true;
export default {
includedInTest,
alsoIncludedInTest
};
This is my test file:
// src/spec/utilities/form-validation.spec.js
import formUtilities from '../../js/utilities/form-validation';
describe('Form validation functions', function () {
it('Should return "true"', function () {
expect(formUtilities.includedInTest()).toBe(true);
});
it('Should return "true"', function () {
expect(formUtilities.alsoIncludedInTest()).toBe(true);
});
});
Finally, this is my karma.conf:
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['browserify', 'jasmine-jquery', 'jasmine'],
files: [
'bower_components/jquery/dist/jquery.js',
'bower_components/jquery-validation/dist/jquery.validate.js',
'src/js/**/*.js',
'src/spec/**/*.spec.js'
],
exclude: [
'src/js/index.js'
],
preprocessors: {
'src/js/**/*.js': ['browserify', 'coverage'],
'src/spec/**/*.spec.js': ['browserify']
},
browserify: {
debug: true,
transform: [
['babelify', { presets: ['es2015'] }]
]
},
reporters: ['mocha', 'coverage'],
mochaReporter: {
colors: {
success: 'green',
info: 'bgBlue',
warning: 'cyan',
error: 'bgRed'
},
symbols: {
success: '√',
info: '#',
warning: '!',
error: 'x'
}
},
coverageReporter: {
instrumenters: { isparta: require('isparta') },
instrumenter: {
'src/**/*.js': 'isparta'
},
dir: 'coverage',
subdir: '.',
reporters: [
{ type: 'html', dir: 'coverage' },
{ type: 'text-summary' }
],
check: {
global: {
statements: 90,
branches: 90,
functions: 90,
lines: 90
},
each: {
statements: 90,
branches: 90,
functions: 90,
lines: 90
}
},
watermarks: {
statements: [50, 75],
functions: [50, 75],
branches: [50, 75],
lines: [50, 75]
}
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: false,
concurrency: Infinity
});
};
This config yields this result:
==== Coverage summary ====
Statements : 100% ( 1/1 )
Branches : 100% ( 2/2 )
Functions : 100% ( 0/0 )
Lines : 100% ( 1/1 )
=============
This is obviously wrong since I have four functions on "form-validation.js", and I am testing two of them. But according to the summary report, there are no functions to be tested.
This line from coverage/index.html reveals only one line is being parsed by karma-coverage:
I also tried 'browserify-istanbul' in the transform array (and removed instrumenters from "coverageReport"):
transform: [
['babelify', { presets: ['es2015'] }],
'browserify-istanbul'
]
But this generates an error:
18 08 2017 15:50:14.617:ERROR [karma]: TypeError: Cannot read property 'start' of undefined
at /Users/gferraz/Sites/OAA-Refactor/node_modules/istanbul/lib/object-utils.js:59:44
at Array.forEach (native)
at Object.addDerivedInfoForFile (/Users/gferraz/Sites/OAA-Refactor/node_modules/istanbul/lib/object-utils.js:58:37)
at Collector.fileCoverageFor (/Users/gferraz/Sites/OAA-Refactor/node_modules/istanbul/lib/collector.js:94:15)
at /Users/gferraz/Sites/OAA-Refactor/node_modules/istanbul/lib/collector.js:108:30
at Array.forEach (native)
at Collector.getFinalCoverage (/Users/gferraz/Sites/OAA-Refactor/node_modules/istanbul/lib/collector.js:107:22)
at checkCoverage (/Users/gferraz/Sites/OAA-Refactor/node_modules/karma-coverage/lib/reporter.js:148:33)
at /Users/gferraz/Sites/OAA-Refactor/node_modules/karma-coverage/lib/reporter.js:257:32
at Array.forEach (native)
at Collection.forEach (/Users/gferraz/Sites/OAA-Refactor/node_modules/karma/lib/browser_collection.js:93:21)
at /Users/gferraz/Sites/OAA-Refactor/node_modules/karma-coverage/lib/reporter.js:247:16
at Array.forEach (native)
at CoverageReporter.onRunComplete (/Users/gferraz/Sites/OAA-Refactor/node_modules/karma-coverage/lib/reporter.js:246:15)
at Server.<anonymous> (/Users/gferraz/Sites/OAA-Refactor/node_modules/karma/lib/events.js:13:22)
at emitTwo (events.js:111:20)
Any suggestions on how to fix the config file?
The config suggested on the correct answer of this post helped me: Karma/Istanbul Code Coverage does not find functions and always returns 100%
Now I am getting an error on the html report ERROR [coverage]: TypeError: Cannot read property 'text' of undefined (meaning the html file I want to generate for the report is not being generated), which seems to be related to istanbul. However, I am getting the right code coverage report on my terminal window:
Strangely enough, the error doesn't happen every time the tests run, so I am able to get the html file just fine sometimes.
Here is the karma.conf that solved the problem addressed on my question:
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['browserify', 'jasmine-jquery', 'jasmine'],
files: [
'bower_components/jquery/dist/jquery.js',
'bower_components/jquery-validation/dist/jquery.validate.js',
'src/js/**/*.js',
'src/spec/**/*.spec.js'
],
exclude: [
'src/js/index.js'
],
preprocessors: {
'src/js/**/*.js': ['browserify'],
'src/spec/**/*.spec.js': ['browserify']
},
browserify: {
debug: true,
extensions: ['.js'],
configure: (bundle) => {
bundle.transform('babelify', { presets: ['es2015'] });
bundle.transform(require('browserify-istanbul')({
ignore: ['**/spec/**']
}));
}
},
reporters: ['mocha', 'coverage'],
coverageReporter: {
dir: 'coverage',
subdir: '.',
reporters: [
{ type: 'html', dir: 'coverage' },
{ type: 'text-summary' }
],
etc...
}
});
};
I come from a Java/Maven background where you would create WAR files to deploy. Maven provides the ability to "filter" files during the build and replace variables at build time with targeted information for the environment you're deploying to.
Now I am working in Node.js and I was wondering if there's a similar facility and best practice you can use in Node.js whereby I could minify my javascript into a single file but at the same time filter variables respective to the environment I'm deploying to.
For instance, there's an app_name config that I'd like to be environment specific:
exports.config = {
app_name : ['$APPNAME-$ENV'],
license_key : 'xxx',
logging : {
level : '$DEBUG_LEVEL'
}
};
So I'd like to be able to update all the $ variables above with environment specific variables into a separate minified JS file. It seems like I'd have to copy the files into a staging area, do a string replace on the variables and then minify. Does that seem reasonable or are there any recommendations on how to best accomplish this in the Node world?
Here's what I ended up doing with GruntJS to accomplish what was talked about above (clean, copy, string-replace, JSHint, and Google CC to minify). I posted a more complete reading of this here for those interested in a deeper dive.
(function () {
'use strict';
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: ["dist"],
copy: {
build: {
files: [
{src: ['./**/*.js', './*.json', './stackato.yml', './README.md', './nunit.js', './test/**/*', '!./dist/**/*', '!./node_modules/**/*', '!./Gruntfile.js'], dest: 'dist/'}
]
}
},
'string-replace': {
dev: {
files: {
"dist/": ["newrelic.js", "stackato.yml", "package.json"]
},
options: {
replacements: [
{
pattern: '$APPNAME',
replacement: "services-people"
},
{
pattern: '$VERSION',
replacement: "1.0.6"
},
{
pattern: 'server.js',
replacement: "server.min.js"
},
{
pattern: '$ENV',
replacement: "DEV"
},
{
pattern: '$PDS_PWD',
replacement: ""
},
{
pattern: '$INSTANCES',
replacement: "1"
},
{
pattern: '$NEWRELIC_TRACE_LVL',
replacement: "trace"
}
]
}
},
prod: {
files: {
"dist/": ["newrelic.js", "stackato.yml", "package.json"]
},
options: {
replacements: [
{
pattern: '$APPNAME',
replacement: "services-people"
},
{
pattern: '$VERSION',
replacement: "1.0.6"
},
{
pattern: 'server.js',
replacement: "server.min.js"
},
{
pattern: '$ENV',
replacement: "prod"
},
{
pattern: '$PDS_PWD',
replacement: ""
},
{
pattern: '$INSTANCES',
replacement: "2"
},
{
pattern: '$NEWRELIC_TRACE_LVL',
replacement: "info"
}
]
}
}
},
jshint: {
options: {
curly: true,
eqeqeq: true,
eqnull: true,
strict: true,
globals: {
jQuery: true
},
ignores: ['dist/test/**/*.js']
},
files: ['Gruntfile.js', 'dist/**/*.js']
},
nodeunit: {
all: ['dist/test/*-tests.js']
},
'closure-compiler': {
build: {
closurePath: '.',
js: 'dist/**/*.js',
jsOutputFile: 'dist/server.min.js',
maxBuffer: 500,
options: {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT',
debug: false
// formatting: 'PRETTY_PRINT'
}
}
}
});
grunt.loadNpmTasks('grunt-closure-compiler');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-nodeunit');
grunt.loadNpmTasks('grunt-string-replace');
// Default task(s).
grunt.registerTask('default', ['clean', 'copy:build', 'string-replace:dev', 'jshint', 'closure-compiler:build']);
grunt.registerTask('prod', ['clean', 'copy:build', 'string-replace:prod', 'jshint', 'closure-compiler:build']);
};
})();
On the CLI, you can just use "grunt" to spin up the DEV version or "grunt prod" to build the PROD version.