配置vscode代码格式化

配置vscode代码格式化

1. 下载插件 Vetur、ESLint、Prettier - Code formatter
2. 工作区配置setting.json

{
    //.vue文件template格式化支持，并使用js-beautify-html插件    
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    //js-beautify-html格式化配置，属性强制换行    
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
        }
    },
    //根据文件后缀名定义vue文件类型    
    "files.associations": {
        "*.vue": "vue"
    },
    //配置 ESLint 检查的文件类型    
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    //保存时eslint自动修复错误    
    "eslint.autoFixOnSave": true,
    //保存自动格式化   
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    //开启 eslint 支持    
    "prettier.eslintIntegration": true,
    //使用单引号    
    "prettier.singleQuote": true,
    //结尾不加分号    
    "prettier.semi": false,
}

3. 根目录新增.eslintrc.js

/*.eslintrc.js*/
module.exports = {
  root: true, //默认是底层文件，不再向上（父文件）搜索
  env: {
    //运行环境
    browser: true,
    commonjs: true,
    node: true,
    es6: true,
  },
  // extends: ["plugin:vue/recommended", "eslint:recommended"],//规则继承，引入eslint-plugin-vue插件，并开启essential类别中的一系列规则，eslint:recommended 启用一些列核心规则
  extends: ["plugin:vue/essential", "eslint:recommended"],
  globals: {
    //全局变量
    // document,
    // navigator,
    // window,
  },
  rules: {
    /*根据规范选择想要的规则，可官网查询相应规则https://eslint.org/docs/rules/*/
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    //强制使用单引号
    quotes: ["error", "single"],
    //强制不使用分号结尾
    semi: ["error", "never"],
  },
  parserOptions: {
    parser: "babel-eslint",
  },
};

4. 创建.prettierrc.js文件

module.exports = {
  printWidth: 100,                   //（默认值）单行代码超出 80 个字符自动换行
  tabWidth: 2,                       //（默认值）一个 tab 键缩进相当于 2 个空格
  useTabs: false,                    // 行缩进使用 tab 键代替空格
  semi: false,                       //（默认值）语句的末尾加上分号
  singleQuote: true,                 // 使用单引号
  quoteProps: 'as-needed',           //（默认值）仅仅当必须的时候才会加上双引号
  jsxSingleQuote: true,              // 在 JSX 中使用单引号
  trailingComma: 'all',              // 不用在多行的逗号分隔的句法结构的最后一行的末尾加上逗号
  bracketSpacing: true,              //（默认值）在括号和对象的文字之间加上一个空格
  jsxBracketSameLine: true,          // 把 > 符号放在多行的 JSX 元素的最后一行
  arrowParens: 'avoid',              // 当箭头函数中只有一个参数的时候可以忽略括弧
  vueIndentScriptAndStyle: false,    //（默认值）对于 .vue 文件，不缩进 <script> 和 <style> 里的内容
  embeddedLanguageFormatting: 'off',
}

5. 找个文件ctrl+s保存试试效果
6. 配置整个项目命令行格式化
   package.json

"scripts": {
    "lint": "eslint --ext .js,.vue src",
    "fix": "eslint --ext .js,.vue src --fix",
    "prettier": "prettier --write src/**/*.{js,vue}"
 },

当你运行npm run lint或npm run fix时，Prettier和ESLint会自动检查并修复代码格式问题。你还可以使用npm run prettier命令快速格式化整个项目的代码。