VSCode中的Prettier - Code formatter插件配置

一、Prettier - Code formatter 文件配置

settings.json文件

1. 参考文章@前端烂笔头
2. 参考文章@m0_57617148

关闭eslint语法报错:

1. 参考文章@钢镚儿吖

建议:

• 首先采用文章一的文件配置

二、关闭保存自动格式化功能

在 settings 文件中将如下属性设置为 false

 "editor.formatOnSave": false, // #每次保存的时候自动格式化

相关配置

1. 再 settings.json 文件中 配置如下代码

{
  "editor.formatOnSave": true,
  "leek-fund.statusBarStock": ["sh000300"],
  "leek-fund.fundSort": -2,
  "liveServer.settings.donotShowInfoMsg": true,
  "leek-fund.immersiveBackground": true,
  "leek-fund.funds": [
    "001632",
    "420009",
    "320007",
    "003096",
    "001102",
    "005827"
  ],
  "window.zoomLevel": 2,
  "winopacity.opacity": 220,
  "update.mode": "none",
  "cssrem.rootFontSize": 100,
  "editor.wordWrap": "on",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "terminal.integrated.defaultProfile.windows": "Command Prompt",
  "javascript.suggest.autoImports": false,
  "typescript.suggest.autoImports": false,
  "workbench.iconTheme": "vscode-icons",
  "material-icon-theme.folders.color": "#813c85",
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "explorer.confirmDelete": false,
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "vetur.format.options.tabSize": 2, // 每个缩进级别的空格数，由所有格式化程序继承
  "vetur.format.scriptInitialIndent": false, // js部分是否有初始缩进
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // - auto: 仅在超出行长度时才对属性进行换行
      // - force: 对除第一个属性外的其他每个属性进行换行
      // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐
      // - force-expand-multiline: 对每个属性进行换行
      // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐
      "wrap_attributes": "force-expand-multiline", // 属性折行对齐方式
      "wrap_line_length": 120, // 设置一行多少字符换行
      "semi": false, // 是否在每行末尾添加分号
      "singleQuote": true, // 使用单引号
      "end_with_newline": false
    }
  },

  "bracket-pair-colorizer-2.depreciation-notice": false,
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "color-highlight.markerType": "dot-before",
  "workbench.colorTheme": "Dracula",
  "sync.gist": "29a531974646d0a8c5a6deca86155da4",
  "sync.syncExtensions": true,
  "sync.quietSync": false,
  "js/ts.implicitProjectConfig.experimentalDecorators": true,
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "search.searchOnType": false,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.fontLigatures": true,
  "editor.fontFamily": "'Fira Code',Consolas, 'Courier New', monospace",
  "eslint.options": {
    "extensions": [".js", ".vue"]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    }
  ],
  "eslint.run": "onSave",
  "eslint.autoFixOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

2. 然后再项目 ‘根目录’ 创建一个.prettierrc文件,如下图所示;

• 双引号保存为 ‘单引号’,配置;
• 

3. 关闭 eslint 自带语法报错功能;

• 在 settings.json 文件下搜索 eslint.enable ,关闭；如下图所示。
• 

三、VSCode中vue拓展vetur整理代码时的尖括号换行问题

参考文章@Nosaj
参考文章@一捆铁树枝
效果图:

• 

"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typ=script",
"vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto"
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
 },

// 第二种
 
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 120,
      "wrap_attributes": "auto",
      "end_with_newline": false
    }
  }
 
 

四、粘贴时自动格式化

解决办法：

• editor.formatOnPaste设置为false
• 参考文章@weixin_34247299

五、vue 文件点击方法名跳转

1. 在项目中根目录下创建一个 jsconfig.json 文件
2. 在 jsconfig.json 配置如下代码

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "@/*": ["src/*"]
    }
  },
   "exclude": ["node_modules", "dist"]
}

vscode 中关闭 eslint 报警问题（vue 项目）

在当前项目中添加vue.config.js,添加代码如下
参考文章@wangsk69

module.exports = {
	lintOnSave:false  // 修改成false 就是不检查了
}

Eslint 插件相关配置

相关文章@猿始森林

依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件，添加如下配置

"eslint.options": {
    "extensions": [".js", ".vue"]
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
        "language": "vue",
        "autoFix": true
    },
    {
        "language": "html",
        "autoFix": true
    }
],
"eslint.run": "onSave",
"eslint.autoFixOnSave": true,