sts可以安装stylus插件吗_VSCode安装及配置（前端开发必备）

最新推荐文章于 2023-06-19 07:00:00 发布

忘記痛苦

最新推荐文章于 2023-06-19 07:00:00 发布

阅读量334

点赞数

文章标签： sts可以安装stylus插件吗

本文链接：https://blog.csdn.net/weixin_30686891/article/details/112900981

版权

VSCode安装及配置

1. 下载并安装VSCode

从官网下载安装包，https://code.visualstudio.com/

本文以Windows环境为例，安装位置D:/Software/，其他全部选中默认即可。

2. 安装插件

安装完成打开VS Code，点击左边工具栏的Extensions (Ctrl+Shift+X)，在搜索框中输入插件名称，点击对应的Install进行插件安装。

1).常用插件(可选)

Chinese Language Pack for Visual Studio Code 中文(简体)

Code Runner 万能代码运行工具

Eclipse Keymap Eclipse 快捷键

GitLens 方便查看git日志，git重度使用者必备

KotStream Theme VSCode主题

Material Icon Theme vscode图标主题，支持更换不同色系的图标

vscode-icons VSCode图标主题

Markdown Preview Enhanced 实时预览markdown

markdownlint markdown语法纠错

Project Manager 项目管理

2).前端基础插件(推荐)

Auto Close Tag 自动闭合HTML/XML标签

Auto Rename Tag 自动完成另一侧标签的同步修改

Bracket Pair Colorizer 让括号拥有独立的颜色，易于区分。可以配合任意主题使用

cssrem px转换为rem

Debugger for Chrome 映射vscode上的断点到chrome上，方便调试

HTML CSS Support 智能提示CSS类名以及id

HTML Snippets 智能提示HTML标签，以及标签含义

JavaScript(ES6) code snippets ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间

Live Server 实时简易服务器,支持html/css/javascript

Path Autocomplete 路径智能补全，比Path Intellisense强，可以连续提示，不用按“/”

Import Cost 显示您在VS代码编辑器中导入的程序包的大小

3).前端格式化插件(必选)

EditorConfig for VS Code .editorconfig插件

ESLint js语法纠错

HTMLHint html代码检测

Prettier - Code formatter Prettier格式

4).React插件(可选)

React/Redux/react-router Snippets React/Redux/react-router语法智能提示

Reactjs code snippets react开发的一些简写

React Native Snippet

React Redux ES6 Snippets

React-Native/React/Redux snippets for es6/es7

Typescript React code snippets 这是tsx的react组件片段

5).VUE插件(可选)

Vetur Vue多功能集成插件，包括：语法高亮、智能提示、emmet、错误提示、格式化、自动补全、debugger

VueHelper Vue代码提示

6).其他前端插件(了解)

Beautify 格式化代码

jQuery Code Snippets jQuery代码智能提示

open in browser 在浏览器中打开html

fileheader 顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间

filesize 在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间

Sass

Sass Formatter

Quokka.js 在代码编辑器中显示各种执行结果

Babel JavaScript 支持ES201x，React和JSX语法高亮

npm Intellisense 对package.json内中的依赖包的名称提示

5).Java开发插件

Java Extension Pack 这一个Java扩展包中，就已经包含最常用的6个扩展 Language Support for Java™ by Red Hat

Debugger for Java

Java Test Runner

Maven for Java

Java Dependency Viewer

Visual Studio IntelliCode

Lombok Annotations Support for VS Code

Java Code Generators

Spring Boot Tools

Spring Boot Extension Pack

3. 自定义配置

1).设置eclipse快捷键

作为一个重度eclipse患者，vs code纵有千万好有些快捷键还是很想延用eclipse的快捷键。

【管理】–> 【命令面板… Ctrl + 3】 --> 输入 Open keyboard Shortcuts --> 打开keybindings.json文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VuqEl3Hi-1585215342407)(VSCode安装及配置.assets/clipboard-1585118287040.png)]

// 将键绑定放在此文件中以覆盖默认值

[

{

"key": "shift+alt+r",

"command": "-revealFileInOS",

"when": "!editorFocus"

{

"key": "alt+/",

"command": "editor.action.triggerSuggest",

"when": "editorTextFocus"

{

"key": "ctrl+d",

"command": "editor.action.deleteLines",

"when": "editorTextFocus"

{

"key": "ctrl+alt+down",

"command": "editor.action.copyLinesDownAction",

"when": "editorTextFocus"

{

"key": "ctrl+alt+up",

"command": "editor.action.copyLinesUpAction",

"when": "editorTextFocus"

{

"key": "shift+enter",

"command": "editor.action.insertLineAfter",

"when": "editorTextFocus && !editorReadonly"

{

"key": "shift+alt+r",

"command": "editor.action.rename",

"when": "editorTextFocus"

{

"key": "ctrl+shift+c",

"command": "editor.action.commentLine",

"when": "editorTextFocus"

{

"key": "ctrl+d",

"command": "editor.action.deleteLines",

"when": "editorTextFocus"

{

"key": "ctrl+k",

"command": "editor.action.addSelectionToNextFindMatch",

"when": "editorFocus"

{

"key": "alt+shift+2",

"command": "workbench.action.splitEditor"

{

"key": "ctrl+shift+f",

"command": "editor.action.format",

"when": "editorTextFocus"

{

"key": "ctrl+k",

"command": "workbench.action.terminal.clear",

"when": "terminalFocus"

}

]

2).首选项设置

文件 --> 首选项 --> 设置 --> 用户

Font Size 设置为14

Font Family 设置为 ‘Courier New’, monospace

放大：查看 > 外观 > 放大对应快捷键 Command + =

缩小：查看 > 外观 > 缩小对应快捷键 Command + -

3).工作空间设置

文件 --> 首选项 --> 设置 --> 工作区 --> settings.json

{

"folders": [

{

"path": "."

}

"settings": {

// 默认格式化工具

"editor.defaultFormatter": "esbenp.prettier-vscode",

// Vue中体验Emmet

"emmet.syntaxProfiles": {

"vue-html": "html",

"vue": "html"

"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue", "html", "jsx"],

"liveServer.settings.multiRootWorkspaceName": "",

"liveServer.settings.port": 5500, //设置本地服务的端口号

"liveServer.settings.root": "/dist", //设置根目录，也就是打开的文件会在该目录下找

"liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器

"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",

"liveServer.settings.NoBrowser": false,

"liveServer.settings.ignoredFiles": [".vscode/**", "**/*.scss", "**/*.sass"],

"search.exclude": {

"**/node_modules": true,

"**/bower_components": true

// #vetur 配置

"vetur.format.defaultFormatter.html": "prettyhtml",

"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.js": "prettier",

"vetur.format.defaultFormatter.ts": "prettier",

"vetur.format.defaultFormatterOptions": {

"js-beautify-html": {

// 属性强制折行对齐

"wrap_attributes": "force-aligned"

"prettyhtml": {

"singleQuote": false,

"sortAttributes": true

}

4).用户设置(可选)

文件 --> 首选项 --> 设置 --> 用户 --> settings.json

{

"workbench.colorTheme": "KotStream Theme",

"workbench.iconTheme": "vscode-icons",

"editor.fontFamily": " 'Courier New', monospace",

"workbench.startupEditor": "welcomePage",

"window.zoomLevel": 1,

}

4.项目配置文件

1)..editorconfig文件配置

# 告诉EditorConfig插件，这是根文件，不用继续往上查找

root = true

# 匹配全部文件

[*]

# 设置字符集

charset = utf-8

# 缩进风格，可选space、tab

indent_style = space

# 缩进的空格数

indent_size = 2

# 结尾换行符，可选lf、cr、crlf

end_of_line = lf

# 在文件结尾插入新行

insert_final_newline = true

# 删除一行中的前后空格

trim_trailing_whitespace = true

# 匹配md结尾的文件

[*.md]

insert_final_newline = false

trim_trailing_whitespace = false

[*.java]

indent_style = tab

2)..eslintrc.js文件配置

在项目根目录下创建.eslintrc.js文件，根据项目配置规则。例如：

如果违反了规则情况下，这里的数字：0表示不不处理，1表示警告，2表示错误并退出

// ESlint 检查配置

{

"root": true,

// 环境定义了预定义的全局变量。

"env": {

// 环境定义了预定义的全局变量。更多在官网查看

"browser": true,

"node": true,

"commonjs": true,

"amd": true,

"es6": true,

"mocha": true

// JavaScript 语言选项

"parserOptions": {

// ECMAScript 版本

"ecmaVersion": 6,

"parser": "babel-eslint",

"sourceType": "module", // script

// 想使用的额外的语言特性:

"ecmaFeatures": {

// 允许在全局作用域下使用 return 语句

"globalReturn": true,

// impliedStric

"impliedStrict": true,

// 启用 JSX

"jsx": true

}

"extends": ["plugin:vue/essential", "@vue/standard"],

// plugins: ['prettier'],

/**

* "off" 或 0 - 关闭规则

* "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出),

* "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

"rules": {

// //

// 可能的错误 //

// //

// 禁止条件表达式中出现赋值操作符

"no-cond-assign": 2,

// 禁用 console

"no-console": [1, { "allow": ["warn", "error", "log"] }],

// 禁止在条件中使用常量表达式

"no-constant-condition": 2,

// 禁止在正则表达式中使用控制字符：new RegExp("\x1f")

"no-control-regex": 2,

// 数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号，

// always-multiline：多行模式必须带逗号，单行模式不能带逗号

"comma-dangle": [1, "always-multiline"],

// 禁用 debugger

"no-debugger": 2,

// 禁止 function 定义中出现重名参数

"no-dupe-args": 2,

// 禁止对象字面量中出现重复的 key

"no-dupe-keys": 2,

// 禁止重复的 case 标签

"no-duplicate-case": 2,

// 禁止对 catch 子句的参数重新赋值

"no-ex-assign": 2,

// 禁止不必要的分号

"no-extra-semi": 2,

// 禁止在字符串和注释之外不规则的空白

"no-irregular-whitespace": 2,

// 禁止在return、throw、continue 和 break语句之后出现不可达代码

"no-unreachable": 2,

// 最佳实践 //

// 使用 === 替代 == allow-null允许null和undefined==

"eqeqeq": [2, "allow-null"],

// 变量声明 //

// 禁止将变量初始化为 undefined

"no-undef-init": 2,

// 禁止出现未使用过的变量

"no-unused-vars": [1, { "vars": "all", "args": "none" }],

// 不允许在变量定义之前使用它们

"no-use-before-define": 0,

// 风格指南 //

// 'no-tabs': 0,

// 缩进：规则,空额数量

"indent": [2, 2, { "SwitchCase": 1 }],

// 不允许空格和 tab 混合缩进

// "no-mixed-spaces-and-tabs": 2,

// 禁用行尾空格

"no-trailing-spaces": 2,

// 强制在花括号中使用一致的空格

"object-curly-spacing": 0,

// 要求或禁止使用分号而不是 ASI(这个才是控制行尾部分号的，)

"semi": [2, "always"],

// 强制在 function的左括号之前使用一致的空格

"space-before-function-paren": [0, "never"],

// 要求或禁止模板字符串中的嵌入表达式周围空格的使用

"template-curly-spacing": 1

}

3)..prettierrc文件配置

在项目根目录下创建.prettierrc文件，根据项目配置规则。例如：

{

// 箭头函数参数括号默认avoid 可选 avoid| always

// avoid 能省略括号的时候就省略例如x => x

// always 总是有括号

"arrowParens": "avoid",

// 对象中的空格默认true

// true: { foo: bar }

// false: {foo: bar}

"bracketSpacing": true,

// JSX标签闭合位置默认false

// false:

// className=""

// style={{}}

// >

// true:

// className=""

// style={{}} >

"jsxBracketSameLine": false,

// 每行最大字符数

"printWidth": 120,

// 使用分号, 默认true

"semi": true,

// 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)

"singleQuote": true,

// tab缩进大小,默认为2

"tabWidth": 2,

// 行尾逗号,默认none,可选 none|es5|all

// es5 包括es5中的数组、对象

// all 包括函数对象等所有可选

"trailingComma": "es5",

// 使用tab缩进，默认false

"useTabs": false,

"overrides": [

{

"files": ".prettierrc",

"options": { "parser": "json" }

}

]

}

4).jsconfig.json文件配置

在项目根目录下创建jsconfig.json文件，根据项目配置规则。例如：

{

"compilerOptions": {

"baseUrl": ".",

"paths": {

"@/*": ["src/*"]

"target": "es2017",

"allowSyntheticDefaultImports": false

"include": ["src/**/*", "mock"],

"exclude": ["node_modules", "dist"]

}

忘記痛苦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
sts可以安装stylus插件吗_VSCode安装及配置（前端开发必备）

VSCode安装及配置1. 下载并安装VSCode从官网下载安装包，https://code.visualstudio.com/本文以Windows环境为例，安装位置D:/Software/，其他全部选中默认即可。2. 安装插件安装完成打开VS Code，点击左边工具栏的Extensions (Ctrl+Shift+X)，在搜索框中输入插件名称，点击对应的Install进行插件安装。1).常用插件...
复制链接

扫一扫