Vscode

vscode 插件

  • Prettier - Code formatter
  • vetur

settings.json 重要配置(文件-首选项-设置)

1"editor.formatOnSave": true, //按保存键时触发格式化
2"files.autoSave": "off",//不自动保存,按保存键触发格式化
3"eslint.alwaysShowStatus": true,//编辑器下面显示eslint的状态栏,!!!如果显示禁用要点击下开启,不开启eslint编辑器不报错提醒
4//语言格式化配置,分多条写如[javascript]:{}
5"[javascript|vue|html|typescript|html|scss|css]": {
6  "editor.defaultFormatter": "esbenp.prettier-vscode"
7},

vscode 设置

  • 编辑窗口右键 format document with…
  • configure default formatter
  • 选中 prettier

package.json 相关包

  • “@vue/cli-plugin-babel”: “^4.4.0”, //cli 工具初始化自带
  • “@vue/cli-plugin-eslint”: “~4.5.0”, //cli 工具初始化自带
  • “babel-eslint”: “^10.1.0”, //cli 工具初始化自带
  • “eslint”: “^6.7.2”, //cli 工具初始化自带
  • “eslint-plugin-vue”: “^6.2.2”, //cli 工具初始化自带
  • “eslint-config-prettier”: “^6.12.0”,
  • “eslint-plugin-prettier”: “^3.1.4”

规则配置

  • eslint(语法规则检测)见 .eslintrc.js (在rules:{'prettier/prettier': 'error'}开启 prettier)
  • prettier(代码格式化)见 .prettierrc.js

.eslintrc.js 参考

 1module.exports = {
 2    root: true,
 3    parserOptions: {
 4        parser: 'babel-eslint'
 5    },
 6    env: {
 7        browser: true,
 8        es6: true,
 9        node: true
10    },
11    extends: [
12        'plugin:vue/essential', //https://eslint.vuejs.org/rules/
13        'eslint:recommended', //https://eslint.bootcss.com/docs/rules/
14        'plugin:prettier/recommended'
15    ],
16    // required to lint *.vue files
17    plugins: ['vue'],
18    // add your custom rules here
19    rules: {
20        'prettier/prettier': 'error',
21        'no-unused-vars': 'error',
22        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
23        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
24    }
25};
26

.prettierrc.js 参考

 1module.exports = {
 2    // tab缩进大小,默认为2
 3    tabWidth: 4,
 4    // 超过最大值换行 默认80(项目实践出结果)
 5    printWidth: 120,
 6    // 使用tab缩进,默认false
 7    useTabs: false,
 8    // 句尾添加分号
 9    semi: true,
10    // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)(项目实践出结果)
11    singleQuote: true,
12    // 默认值。因为使用了一些折行敏感型的渲染器(如GitHub comment)而按照markdown文本样式进行折行
13    proseWrap: 'preserve',
14    // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号 always 总是有括号
15    arrowParens: 'always',
16    // 在对象,数组括号与文字之间加空格 "{ foo: bar }"
17    bracketSpacing: true,
18    // 结尾是 \n \r \n\r auto
19    endOfLine: 'auto',
20    htmlWhitespaceSensitivity: 'ignore',
21    // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
22    ignorePath: '.prettierignore',
23    // Require a "prettierconfig" to format prettier
24    requireConfig: false,
25    // 行尾逗号,默认none,可选 none|es5|all {name: 'audaque'}
26    // es5 包括es5中的数组、对象
27    // all 包括函数对象等所有可选
28    trailingComma: 'none'
29};
30

换行符 crlf、lf 处理

  • Ensure Prettier’s endOfLine option is set to lf (this is a default value since v2.0.0) 能够检查出来那里不是 lf,但是不能纠正
  • Configure a pre-commit hook that will run Prettier 提交前检查
  • Configure Prettier to run in your CI pipeline using –check flag. If you use Travis CI, set the autocrlf option to input in .travis.yml. git config --global core.autocrlf input 能够在提交到 git 仓库转化为 lf,下载时不转化
  • Add * text=auto eol=lf to the repo’s .gitattributes file. You may need to ask Windows users to re-clone your repo after this change to ensure git has not converted LF to CRLF on checkout.
  • 安装 vscode 插件 EditorConfig for VS Code ,配置.editorconfig ,保存时能够自动更正换行符
1[*]
2end_of_line = lf

Web Api
Slot

评论