README

What is it?

1. The handy tool set to begin code conventions automation
2. Project health check report
   • report template RUS
   • example 1 ENG
     • disclaimer
     • summary
     • details
   • example 2 RUS
   • article RUS
3. Tools
   • eslint - js/ts linter with plugins: typescript, angular, promise, react
   • tslint - still useful(finnish notation)
   • stylelint - css
   • cspell - spelling
   • prettier - formatter
   • jscpd - copy paste
   • webpack dependency graph
   • TODO sonar - code quality
   • TODO Live linting playground

What is it for?

1. Collect and reuse:
   • working live linters config files
   • typical code review issues based on linter rules
2. Provide an alternative to airbnb/google rule sets. Enterprise rule sets made to fit any project and reduce enabled rules as much as it possible.

Scripts FAQ

• grep - search files and text patterns
• awk - search and combine text line blocks
• find - search files and text patterns
• echo "text1 $command text2" - insert command output into text
• wc -l $filename - lines count in file
• $command | wc -l - lines count in command output
• $command1 | $command2 - transmit command1 output to the command2 input
• $command > $file - clear file and add text from the command output
• $command >> $file - add text to the file from command output

How to use

1. Run scripts from the project folder to avoid npm dependencies installation in linter folder
   • enable fullTemplateTypeCheck or strictTemplates in tsconfig.json
   • uncomment the NX section in scripts if you use it
   • run

      	cd code_quality_js-folder
      	./scripts/project_folder/prepare.sh "absolute_path_to_project"
      	cd "absolute_path_to_project"
      	npm i
      	./scripts/project_folder/run.sh

   • make the screenshots of dist/report.html and paste it into log folder
   • manually refine and move libs from log/npm.dependencies.log to report/README.md
   • check the README for harder cases
2. Run scripts from the linters folder to avoid eslint configuration and dependency hell resolution in project folder
   • run

      	# install libs
      	cd code_quality_js-folder
      	npm i
      	# copy project `src` folder to the linter `src` folder.
      	cp your_project_path/src ./src
      	# run scripts
      	./scripts/linter_folder/run.sh
      	# manually edit the eslint.rules.important.log
      	./scripts/linter_folder/eslint.important.sh
      	# remove mistakes from log/spell.words.important.log
      	./scripts/linter_folder/spell.important.sh

   • check the README for harder cases

Issues

• jscpd hangs
  • disable blame
  • reduce threshold
  • analyze html|ts|css separately

TODO

• add circular dependency via webpack script
  • https://www.digitalocean.com/community/tutorials/angular-custom-webpack-config
  • angular.json

     	"architect": {
     	"build": {
     		"builder": "@angular-builders/custom-webpack:browser",
     		"options": {
     		"customWebpackConfig": {
     			"path": "./custom-webpack.config.js",
     			"replaceDuplicatePlugins": true
     		},

  • https://www.npmjs.com/package/circular-dependency-plugin
  • npm i circular-dependency-plugin @angular-builders/custom-webpack@14
  • cat >> custom-webpack.config.js

     	const CircularDependencyPlugin = require('circular-dependency-plugin')
     	
     	module.exports = {
     		entry: "./src/main",
     		plugins: [
     			new CircularDependencyPlugin({
     			// `onStart` is called before the cycle detection starts
     			onStart({ compilation }) {
     				//console.log('start detecting webpack modules cycles');
     			},
     			// `onDetected` is called for each module that is cyclical
     			onDetected({ module: webpackModuleRecord, paths, compilation }) {
     				// `paths` will be an Array of the relative module paths that make up the cycle
     				// `module` will be the module record generated by webpack that caused the cycle
     				compilation.errors.push(new Error(paths.join(' -> ')))
     			},
     			// `onEnd` is called before the cycle detection ends
     			onEnd({ compilation }) {
     				//console.log('end detecting webpack modules cycles');
     			},
     			})
     		]
     	}

• add scripts/docs about eslint performance optimization:
  • TIMING=1; npm run lint:es
  • eslint --print-config >> eslintrc-expanded.json
• add more analyze results from rwa
• add code frequency
  • git log '--since=1 year ago' --name-only --pretty='format:' | sed '/^\s*$/'d | sort | uniq -c | sort -rn | less
  • git rev-list
• add design system metrics like
  • projectwallface
  • chroma
  • figma color distance and hardcoded colors
• add ripgrep cli
• add grep eslint-disable | sort | uniq -c | sort -rn | less
• add coupling/cohesion graph to help in folder structure refactoring
  • shared files with large import count
  • impact, scope of refactoring
  • complexity visualization
• add processes analysis
  • files with high "bus factor"
  • people burnout risk
  • team velocity
• add sonarlint docker
• Angular code examples
• Find how to use the live cloud playground https://stackblitz.com/edit/code_quality_js
• badges
• jest --coverage