我试图将Prettier与eslint和TypeScript一起使用。当我运行npm run prettier -- --list-different
时,我所有的css文件都收到错误SyntaxError: Unexpected token, expected ";"
。我以为我的解析设置方式存在问题,但似乎无法使其正常工作。这是我当前的设置。
.eslintrc
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"extends": [
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"prettier/@typescript-eslint",
"plugin:prettier/recommended"
],
"rules": {
"no-console": "warn",
"@typescript-eslint/explicit-function-return-type": ["warn", {"allowExpressions": true}]
},
"settings": {
"react" : {
"createClass": "createReactClass",
"pragma": "React",
"version": "detect"
}
},
"env": {
"browser": true
}
}
.prettierrc
{
"arrowParens": "avoid",
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"parser": "babel",
"printWidth": 120,
"proseWrap": "always",
"requirePragma": false,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "none",
"useTabs": false
}
css文件
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
package.json(以防万一)
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"classnames": "^2.2.6",
"lodash": "^4.17.11",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^6.0.1",
"react-scripts": "^2.1.8",
"react-scripts-ts": "3.1.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"typescript": "^3.4.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint --ext js,jsx,ts,tsx --max-warnings 0 -f codeframe --cache --color src",
"format": "npm run prettier -- --write",
"prettier": "prettier \"**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|graphql|mdx)\"",
"validate": "npm run lint && npm run prettier -- --list-different && tsc",
"precommit": "lint-staged && tsc",
"typecheck": "tsc"
},
"devDependencies": {
"@types/classnames": "^2.2.7",
"@types/enzyme": "^3.9.1",
"@types/enzyme-adapter-react-16": "^1.0.5",
"@types/jest": "^24.0.11",
"@types/lodash": "^4.14.123",
"@types/node": "^11.13.0",
"@types/react": "^16.8.13",
"@types/react-dom": "^16.8.3",
"@types/react-redux": "^7.0.6",
"@typescript-eslint/eslint-plugin": "^1.6.0",
"@typescript-eslint/parser": "^1.6.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.12.4",
"prettier": "^1.16.4",
"react-addons-test-utils": "^15.6.2",
"redux-devtools-extension": "^2.13.8"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
我曾尝试像这样向.prettierrc
和.eslintrc
文件中添加替代,但是没有用。
"overrides": [{
"files": "*.css",
"options": {
"parser": "babel"
}
}]
答案 0 :(得分:0)
结果证明,我需要将overrides
添加到.prettierrc
文件中,并将解析器设置为css。我使用了错误的解析器,尝试使用postcss-scss
之类的方法。看起来像这样。
"overrides": [
{
"files": "*.css",
"options": {
"parser": "css"
}
}
]