最近开发项目需要用到eslint 但是手动格式化太麻烦了 发现eslint配置Prettier 能自动格式化 感觉就是神器啊 但是不能格式化template Standar还是可以的 不知道其他版本怎么样
1.安装 Prettier - Code formatter
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
2.配置setting
settings.json
// eslint 配置
"eslint.enable": true,
"workbench.colorCustomizations": {},
"eslint.autoFixOnSave": true,
"eslint.options": {
"extensions": [
".ts",
".js",
".jsx",
".vue"
]
},
"eslint.validate": [
"typescript",
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
//prettire
//js文件验证
"[javascript]": {
"editor.formatOnSave": true
}
//开启对ts的文件验证
"[typescript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "vscode.typescript-language-features"
},
// 使用单引号
"prettier.singleQuote": true,
// 不带尾随逗号
"prettier.trailingComma": "none",
// 语句结尾不加分号
"prettier.semi": false,
//代码缩进为2格
"prettier.tabWidth": 2,
"editor.quickSuggestions": {
"strings": true
},
.eslintc.js
module.exports = {
root: true,
env: {
browser: true,
node: true,
es6: true
},
parserOptions: {
parser: '@typescript-eslint/parser',
sourceType: 'module'
},
plugins: [
'vue'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
"camelcase": 0,
'space-before-function-paren': [2, 'never'],
'vue/array-bracket-spacing': 'error',
'vue/arrow-spacing': 'error',
'vue/block-spacing': 'error',
'vue/brace-style': 'error',
'vue/camelcase': 'error',
'vue/comma-dangle': 'error',
'vue/component-name-in-template-casing': 'error',
'vue/eqeqeq': 'error',
'vue/key-spacing': 'error',
'vue/match-component-file-name': 'error',
'vue/object-curly-spacing': 'error',
// 'indent': [1, 4],
// 'vue/script-indent': [
// 'error',
// 4,
// {
// 'baseIndent': 1
// }
// ]
},
'extends': [
'eslint:recommended',
'plugin:vue/recommended',
'@vue/standard',
'@vue/typescript'
]
}
package.json
"devDependencies": {
"@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-plugin-e2e-cypress": "^3.8.0",
"@vue/cli-plugin-eslint": "^3.8.0",
"@vue/cli-plugin-pwa": "^3.8.0",
"@vue/cli-plugin-typescript": "^3.8.1",
"@vue/cli-plugin-unit-jest": "^3.8.0",
"@vue/cli-service": "^3.8.4",
"@vue/eslint-config-standard": "^4.0.0",
"@vue/eslint-config-typescript": "^4.0.0",
"@vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.2",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.2",
}