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

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
`Prettier - Code formatter` 是 Visual Studio Code (VSCode) 中非常受欢迎的一个插件,它是一个代码格式化工具,用于自动调整JavaScript、TypeScript等文件的编码风格,确保代码的统一性和可读性。安装和使用这个插件的步骤如下: 1. **安装插件**: - 打开VSCode,点击左上角的扩展图标(或者直接搜索 `ext install prettier-vscode`)。 - 在搜索框中输入 "Prettier",选择 "Prettier - Code formatter" 并点击安装。 2. **配置Prettier**: - 安装完成后,插件通常会在`settings.json`(或`.prettierrc`)文件中提供默认配置。你可以根据需要修改这些设置,比如选择代码格式化的规则、语言支持等。 - 配置文件通常位于`File > Preferences > Settings` 或者使用快捷键 `Ctrl + ,`(Windows/Linux)或 `Cmd + ,`(Mac)打开。 3. **启用自动格式化**: - 在编辑器中,选择要格式化的文件,然后按 `Ctrl + Shift + I`(Windows/Linux)或 `Cmd + Shift + I`(Mac)启动格式化功能,或者可以通过快捷键 `Shift + Alt + F` 来格式化选中的代码块。 - 另外,可以在 `Code Actions` 面板(`Ctrl + .` or `Cmd + .`)中找到 `Format Document` 或 `Format Selection` 功能。 4. **扩展至其他语言**: 如果你想对其他编程语言进行格式化,可以在Prettier的配置中添加对应语言的支持,如 `prettier.parser.ts` 对 TypeScript 的支持。 **相关问题--:** 1. 如何在VSCode中自定义Prettier的配置? 2. 是否能设置Prettier格式化特定的文件或文件夹? 3. Prettier如何处理已存在的代码风格不一致的情况?

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值