noahwillcrow / lint-rules

lint-rules

What follows is an incomplete guide on how to get started using typescript-eslint with eslint-plugin-roblox-ts and prettier. We eventually plan to make a better guide and automate a number of these steps through rbxtsc command line options. But, for now, here is how to use these lint rules with VSCode.

Step 1: Install the ESLint plugin for VSCode

Install the following:

Step 2: Change your VSCode settings

Make sure these settings are in your settings file (Ctrl + , to open the settings UI, then press the Open Settings (JSON) button in the top right):

	"[typescript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode",
		"editor.formatOnSave": false, // we turn this off because eslint.autoFixOnSave runs
		"editor.formatOnPaste": true,
		"editor.formatOnType": true
	},
	"[typescriptreact]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode",
		"editor.formatOnSave": false,
		"editor.formatOnPaste": true,
		"editor.formatOnType": true
	},
	"eslint.validate": [
		"javascript",
		"javascriptreact",
		{ "language": "typescript", "autoFix": true },
		{ "language": "typescriptreact", "autoFix": true }
	],
	"eslint.packageManager": "npm",
	"eslint.run": "onType",
	"eslint.autoFixOnSave": true,
	"prettier.eslintIntegration": true

Step 3: Setup the eslint config file

Make a file named .eslintrc and place this in the contents. If you have a pre-existing .prettierrc file, you can move your rules into "prettier/prettier" (and delete .prettierrc). Either way, you can change your formatting preferences by editing the rules in "prettier/prettier".

{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "jsx": true,
        "useJSXTextNode": true,
        "ecmaVersion": 2018,
        "sourceType": "module",
        "project": "./tsconfig.json"
    },
    "plugins": [
        "roblox-ts",
        "@typescript-eslint",
        "@typescript-eslint/eslint-plugin",
        "prettier"
    ],
    "extends": [
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended",
        "plugin:roblox-ts/recommended"
    ],
    "rules": {
        "prettier/prettier": [
            "warn",
            {
                "semi": true,
                "trailingComma": "all",
                "singleQuote": false,
                "printWidth": 120,
                "tabWidth": 4,
                "useTabs": true
            }
        ],
        "@typescript-eslint/array-type": [
            "warn",
            {
                "default": "generic",
                "readonly": "generic"
            }
        ],
        "@typescript-eslint/no-unused-vars": "off",
        "@typescript-eslint/explicit-function-return-type": "off",
        "@typescript-eslint/no-namespace": "off",
        "@typescript-eslint/no-non-null-assertion": "off",
        "@typescript-eslint/no-empty-function": "warn",
        "prefer-const": "warn",
        "no-undef-init": "error"
    }
}

Step 4: Install the necessary packages

Run the following command:

npm i -D eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier eslint-plugin-roblox-ts

Step 5: Reload window

Type Ctrl+Shift+P and select Developer: Reload Window.