What's the best way to get vscode to auto style & lint correct code for tfjs?

iislucas · March 30, 2022, 8:46pm

The subject says it mostly already; my default TS + TFJS setup seems to mangle existing style, e.g. see:

github.com/tensorflow/tfjs

initial version of gradients for prod

tensorflow:master ← iislucas:iislucas-prod-grad

opened 08:34PM - 11 Mar 22 UTC

iislucas

+212 -0

Initial implementation of gradients for `prod` operator: Fixes: https://githu…b.com/tensorflow/tfjs/issues/2587 Tested locally with: ``` $ yarn run tslint -p tsconfig_tslint.json $ cd tfjs-core $ yarn run bazel test --test_output=streamed :tfjs-core_test :test_snippets_test :tfjs-core_node_test :tfjs-core_async_backends_test src:worker_node_test src:worker_test --//:grep=prod ``` --- This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/tensorflow/tfjs/6216)

Curious what others do to get vscode to fix style instead of breaking it

Bhack · March 30, 2022, 10:46pm

It is executed on save but non integrated in the IDE:

github.com

tensorflow/tfjs/blob/02728923e99b3d06179bf38acbbdbd6d69609513/.vscode/settings.json#L33

      
        
            "[javascript]": {
              "editor.formatOnSave": true
            },
            "[cpp]": {
              "editor.formatOnSave": true
            },
            "emeraldwalk.runonsave": {
              "commands": [
                {
                  "match": "(BUILD|.*bzl)",
                  "cmd": "yarn bazel:format && yarn bazel:lint"
                }
              ]
            },
            "editor.defaultFormatter": "xaver.clang-format",
            "editor.rulers": [80],
            "clang-format.style": "Google",
            "files.insertFinalNewline": true,
            "editor.detectIndentation": false,
            "editor.wrappingIndent": "none",
            "typescript.tsdk": "node_modules/typescript/lib",

I suppose that you can try to configure Eslint extension with the same behavior as the linting steps:

github.com

tensorflow/tfjs/blob/master/package.json#L62-L82

      
        
            },
            "scripts": {
              "lint": "tslint -p tsconfig_tslint.json",
              "test-packages-ci": "yarn generate-cloudbuild-for-packages && ./scripts/run-build.sh",
              "generate-cloudbuild-for-packages": "./scripts/generate_cloudbuild_for_packages.js",
              "test-generate-cloudbuild": "jasmine run scripts/generate_cloudbuild_test.js",
              "test-run-flaky": "jasmine run scripts/run_flaky_test.js",
              "release": "ts-node -s ./scripts/release.ts",
              "release-tfjs": "ts-node -s ./scripts/release-tfjs.ts",
              "publish-npm": "ts-node -s ./scripts/publish-npm.ts",
              "release-notes": "ts-node -s ./scripts/release_notes/release_notes.ts",
              "test-release-notes": "ts-node -s ./scripts/release_notes/run_tests.ts",
              "update-tfjs-lockfiles": "ts-node -s ./scripts/update-tfjs-lockfiles",
              "tag-tfjs-release": "ts-node -s ./scripts/tag-tfjs-release",
              "update-cloudbuild-tests": "yarn generate-cloudbuild-for-packages tfjs-node -o scripts/cloudbuild_tfjs_node_expected.yml && yarn generate-cloudbuild-for-packages e2e -o scripts/cloudbuild_e2e_expected.yml",
              "bazel:format": "find . -type f \\( -name \"*.bzl\" -or -name WORKSPACE -or -name BUILD -or -name BUILD.bazel \\) ! -path \"*/node_modules/*\" | xargs buildifier -v --warnings=attr-cfg,attr-license,attr-non-empty,attr-output-default,attr-single-file,constant-glob,ctx-actions,ctx-args,depset-iteration,depset-union,dict-concatenation,duplicated-name,filetype,git-repository,http-archive,integer-division,load,load-on-top,native-build,native-package,out-of-order-load,output-group,package-name,package-on-top,positional-args,redefined-variable,repository-name,same-origin-load,string-iteration,unsorted-dict-items,unused-variable",
              "bazel:format-check": "yarn bazel:format --mode=check",
              "bazel:lint": "yarn bazel:format --lint=warn",
              "bazel:lint-fix": "yarn bazel:format --lint=fix",
              "bazel:lint-check": "yarn bazel:format --lint=warn --mode=check",
              "buildifier-ci": "./scripts/buildifier-ci.sh"

Probably it could be interesting to contribute this configuration on the repository.

iislucas · July 23, 2022, 2:57pm

yes, it would make it easier to contribute; using different defaults will cause all sorts of formatting changes by accident and break lint style. Adding it and documenting in in the how to contribute docs would be great.