Azure / Azure/static-web-apps

Build and Deploy Job failed after adding ESLint and Prettier to API

Open
#625 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
No language data
Stars
346
Forks
67
PR merge metrics
No merged PRs in 30d

Description

**Describe the bug**

I am trying to configure the API project built with TypeScript with ESLint and Prettier but after I add it the "Build and Deploy Job" is failed with this message:

```
The function language detected is unsupported or invalid. The following languages are valid: dotnet, dotnetisolated, node, python. If you are not using Azure Functions, you can skip this check by removing the 'api_location' input from the workflow file.
```

**To Reproduce**
Here are the steps I've taken on setting up the ESLint and Prettier:
1. Install ESLint, Prettier, and its plugins
```zsh
npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint \
eslint-config-airbnb-base eslint-config-airbnb-typescript \
eslint-config-prettier eslint-plugin-import eslint-plugin-prettier prettier
```
2. Run `eslint --init` to generate `.eslintrc.js`

**Difference in project files**

#### .eslintrc.js
```diff
+ module.exports = {
+ "env": {
+ "es2021": true,
+ "node": true
+ },
+ "parser": "@typescript-eslint/parser",
+ "parserOptions": {
+ "ecmaVersion": 12,
+ "sourceType": "module"
+ },
+ "plugins": [
+ "@typescript-eslint"
+ ],
+ "rules": {
+ }
+ };
```

#### package.json

```diff
"start:host": "func start",
"start": "npm-run-all --parallel start:host watch",
"test": "jest",
- "generate-spec": "tsoa spec"
+ "generate-spec": "tsoa spec",
+ "lint": "eslint .",
+ "format": "prettier --write './**/*.{js,ts,css,md,json}' --config ./.prettierrc"
},
"description": "",
"devDependencies": {
@@ -20,9 +22,18 @@
"@babel/preset-typescript": "^7.15.0",
"@types/jest": "^27.0.2",
"@types/node": "^16.11.3",
+ "@typescript-eslint/eslint-plugin": "^5.3.1",
+ "@typescript-eslint/parser": "^5.3.1",
"babel-jest": "^27.3.1",
+ "eslint": "^7.32.0",
+ "eslint-config-airbnb-base": "^14.2.1",
+ "eslint-config-airbnb-typescript": "^15.0.0",
+ "eslint-config-prettier": "^8.3.0",
+ "eslint-plugin-import": "^2.25.2",
+ "eslint-plugin-prettier": "^4.0.0",
"jest": "^27.2.4",
"npm-run-all": "^4.1.5",
+ "prettier": "^2.4.1",
"ts-jest": "^27.0.5",
"typescript": "^4.4.4"
},
```

**Expected behavior**
- ESLint and Prettier can help me lint, format, and enforce code styles
- "Build and Deploy Job" can run and deploy without any errors.

**Additional context**
- API project is generated with `func new`
- I've run `eslint .` before triggering the job to ensure that the error does not relate to the code styles
- In the reproducing part - I've installed many plugins along with the `eslint` and `prettier` but the reason I'm not using them in the `.eslintrc.js` is also to ensure that the error does not relate to the code styles (enforced by the plugins)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.