VSCode Setting.json

{
    /*
  editor 配置针对所有文件类型
  ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具,检测的是语法,有标准和强校验之说
  vetur 是针对vue文件中的html,js,cs的格式化使用习惯,vetur可以设置只针对html或js的格式化配置
  prettier 可以针对vue,也可以针对js等文件的格式化配置
  通常的配置是以上三者结合使用
  prettier可以自己单独设置,也可以设置到vetur中
  */
    //#region editor start
    // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // tab 大小为2个空格
    "editor.tabSize": 2,
    // #每次保存的时候自动格式化
    "editor.formatOnSave": true,
    // 保存时按照哪个规则进行格式化
    "editor.codeActionsOnSave": {
        // #每次保存的时候将代码按eslint格式进行修复
        "source.fixAll.eslint": true
    },
    // 在键入一行后是否自动化格式
    "editor.formatOnType": true,
    // 超长代码一般出现在html中, 我不喜欢html属性换行, 但是又想看到全部, 那就只能设置编辑器视觉上的换行了.
    "editor.wordWrap": "wordWrapColumn",
    // vscode 全局针对所有类型文件 100 列后换行
    "editor.wordWrapColumn": 150,
    //#region editor end

    //#region eslint start
    "eslint.run": "onSave",
    // 添加 vue 支持
    "eslint.validate": ["vue", "html", "javascript", "javascriptreact", "typescript"],
    // 项目内创建eslint配置文件
    "eslint.options": {
        //指定eslint配置文件位置
        "extensions": [".js", ".vue"]
        // "configFile": ".eslintrc.js" //指定项目根目录中的eslint配置文件
    },
    //#region eslint end

    //#region vetur start
    // 选择 vue 文件中 template 的格式化工具, 默认采用js-beautify-html格式化
    "vetur.format.defaultFormatter.html": "prettyhtml", // 如果项目中有单独配置eslint文件 这个设置会与项目中的eslint配置文件冲突
    "vetur.format.defaultFormatter.js": "vscode-typescript", // 不用prettier因为最新版prettier保存会把单引号改双引号,并加分号结尾,需要自己创建一个prettier配置文件
    // "vetur.format.defaultFormatter.css": "prettier",
    // "vetur.format.defaultFormatter.postcss": "prettier",
    // "vetur.format.defaultFormatter.scss": "prettier",
    // "vetur.format.defaultFormatter.less": "prettier",
    // "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
    // "vetur.format.defaultFormatter.ts": "prettier",
    // "vetur.format.defaultFormatter.sass": "sass-formatter",
    // 使用eslint插件时需要把此项设置为false
    "vetur.validation.template": false,
    //检查js代码
    "vetur.validation.script": true,
    //能检查css的属性是否存在,分隔符是否正确
    "vetur.validation.style": true,
    "vetur.ignoreProjectWarning": true,
    "vetur.format.defaultFormatterOptions": {
        // #vue组件中html代码格式化样式
        "prettier": {
            "printWidth": 150, // 超过最大值换行
            "trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
            "tabWidth": 2, // 会忽略vetur的tabSize配置
            "useTabs": false, // 是否利用tab替代空格
            "semi": false, // prettier 去掉代码结尾的分号
            "singleQuote": true, // prettier 设置强制单引号
            "bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
            "eslintIntegration": true, // 让prettier使用eslint的代码格式进行校验
            "arrowParens": "avoid" //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
        }
    },
    //#region vetur end

    //#region prettier start
    // vue文件使用启用vetur格式化代码
    // 使能每一种语言默认格式化规则
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    /*  prettier的配置 */
    "prettier.printWidth": 150, // 超过最大值换行
    "prettier.tabWidth": 2, // 缩进字节数
    "prettier.useTabs": false, // 缩进使用tab，不使用空格
    "prettier.semi": false, // 句尾不添加分号
    "prettier.singleQuote": true, // 使用单引号代替双引号
    "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
    "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    "prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
    "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
    "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 单独放一行
    "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
    "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
    "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
    "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
    "prettier.trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）,es5||none
    "prettier.tslintIntegration": false, // 不让prettier使用tslint的代码格式进行校验
    //#region prettier end
    // 让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "files.autoSave": "afterDelay",
    "liveServer.settings.donotShowInfoMsg": true,
    "sync.gist": "748900cb13edf456369d40a3acf3f4ec",
    "git.autofetch": true,
    "git.enableSmartCommit": true,
    "vsicons.dontShowNewVersionMessage": true,
    "workbench.iconTheme": "vscode-icons",
    "vscodeGoogleTranslate.preferredLanguage": "English",
    // vscode-fileheader js文件头部加文件注释,修改文件后自动更新时间
    "fileheader.Author": "comyn",
    "fileheader.LastModifiedBy": "comyn",
    "cSpell.userWords": ["camelcase", "comyn", "eqeqeq", "iife", "isnan", "linebreak", "nonwords", "plusplus"],
    "explorer.confirmDelete": false,
    "workbench.colorTheme": "Default Dark+"
}