vscode Prettier - Code formatter插件+eslint js Standar 保存自动格式化

最近开发项目需要用到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",
}

 

你可能感兴趣的:(vscode)