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,
"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
.